{"_id":"@wework/react-floormap","_rev":"452-9e989fe776943344c02b0dce81951cf3","name":"@wework/react-floormap","dist-tags":{"latest":"1.8.7","dev":"1.0.10-dev5","rc":"2.30.1-rc.2","test":"1.1.1-test1","dev-lerna":"1.1.1-dev-lerna.2","rc-lerna":"1.1.1-rc-lerna.29","next":"1.2.1-next.3","ss":"1.1.4-ss.6","tsdx":"1.2.4-tsdx.11","tsdx-2":"1.4.1-tsdx-2.8","lodash-size":"1.8.2-lodash-size.4","v2":"2.28.0","develop":"3.17.0"},"versions":{"0.0.1":{"name":"@wework/react-floormap","version":"0.0.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@material-ui/styles":"3.0.0-alpha.10","@material-ui/system":"^3.0.0-alpha.2","@wework/floormap-extensions":"1.1.0-rc7","@wework/floormap-sdk":"1.1.0-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","material-ui-pickers":"^2.2.1","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"gitHead":"a3e355539f37193bd2ec1003a1f86a2a1111106f","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.1","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-zuTbnb1136v1x90l8mYL9dEvETSLokrRJWu0IHzyHN+SWGQnzD7l4JZsUejkiklC95C24bxdWgzihHBC8GZ4xg==","shasum":"f606163d3aa0648b4528c4b73fb553b9932764c4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.1.tgz","fileCount":178,"unpackedSize":860008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceKbKCRA9TVsSAnZWagAAUNwP/ixXpma776rY2aacgypz\nmRhwG2DsANdZlBg5z9yne+Jp+JjHIOHHs7P4znT1JH2Pm43MU9PJN0olYF5F\nFHpa1aF8k5Yw4K5dB8bG2cwA4RL5B76Fllt0+67nI0qpXVKDgbUMRGhG59vC\nnqWq2pKuUdO7BHqv47+hYdXxJpLQO7AtTFRLd64rPmEBAor2I9x7tbGNLjjx\nIuvnlY3JR/NAsGhIXwBFjGN49+YrrXYtYHZ5g1IWN1jijuzK+0VDnNWXMRBB\nkjAoW0P6+mWwQRhQOIZaBZhxjZcEv8GJ9Tb0WTlvqijOCqNsGgBb7eJouxop\nLizV/O3sJ94ESbSFWsHyDgYlYBwav0R5BIDfcE8tYHTLVYNblqzR/pr7Qbo7\nWhtkL+iSiyo7WwHgTU7rVbhN/vabn/3Bs1ZZviJ5cWWIPHA0Om8wmBpkM0wx\nhjOqtoii++XQwHP0JqAxU5MHp1JcoxJXtiLfQ0b3N14huF7keuIG6xHNAsr6\nKxf5H8InCMlUuoedr3jy5evXLfr6Oc9+hssqmXyXYBDFA6+f5E9m000W2QEx\njTcyAzNSySHpvle1tR0MkOm4+EaDaYSw80F/aO19afXDC8bVEKlgW0WRfzC0\nAIWvWKTxl4s3ZOhtdKWhwlnZsAZmJjhPHF1TcHRgwRAnYwj0kl72O2IoGOK5\nGths\r\n=bIH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXEsvPhFiKIqNjRYlD3Vg3KRCKYzFwwBRW5C6sM8p6cAiEAsXy0me6iLpC4tJp/v4nN6MMz+mAJIFfAdSF1iR+IkxU="}]},"maintainers":[{"name":"giladbar","email":"gilad.bar@wework.com"},{"name":"emrebsonmez","email":"emrebsonmez@gmail.com"},{"name":"jimmyhsu","email":"jimmyhsu+npm@live.com"},{"name":"hamidagh","email":"hamid.aghdaee@gmail.com"},{"name":"cmugla","email":"cmugla@gmail.com"},{"name":"drbaxter821","email":"drbaxter821@gmail.com"},{"name":"mhotwagnerr","email":"mhotwagner@gmail.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"i8ramin","email":"i8ramin@gmail.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"glosch","email":"glosch00@gmail.com"},{"name":"maxerogers","email":"max@carrotcreative.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"b-insh","email":"bethany.hyland@wework.com"},{"name":"weaxel","email":"axel.esquite@wework.com"},{"name":"maniator","email":"naftalilubin@gmail.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"philsturgeon","email":"me@philsturgeon.uk"},{"name":"adamraider","email":"adamjraider@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.1_1551410890237_0.1285057870331212"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.2":{"name":"@wework/react-floormap","version":"0.0.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0-rc8","@wework/floormap-sdk":"1.1.0-rc7","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","material-ui-pickers":"^2.2.1","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"gitHead":"e244e1a41f7ab802726ba3fdcefee27111fe5fdf","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.2","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-lXNtBB+1rck4net8LYVhXnukNLkS3W1l97pLRNFtuAFgzbHprCMNFKqfmrS0QsT+2EF9jiOO3ubR+K2tE3Mn7w==","shasum":"cf49ae4791ed8b91fbe5a651eb0be1a355eb241d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.2.tgz","fileCount":178,"unpackedSize":862122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceOL/CRA9TVsSAnZWagAAvgoQAJV4RmM03/2MZeA69EvV\nvQBaz7UqUDlwa8Akd8DBJeqsczeimqOQqMcqINs1/sBEJpgmyBeK90Q9c9bp\nGwW0APrU+jypO8wfb9w5zSPDsTxkOgiwmlh7VTe/LndGOp/V7G77yecEjK06\ndSUziW+z1evd+O/mNzUTWebwWOZii1vYl7tv8P0LJbPbJiT15tCt41ZE+iLZ\n7b/rqPLYBOkGo70pjWlC7dHkjCt1yVjbm2VDZt5FP32v4Q+A6QLejIkw1hBk\nRb4J4cPeVGLQ2m9jBB4n134zQPs1v8qa5JL8kSTgi+/qRTcYSi3Cf86KoI/L\nvopkDK6AnmHo4vTiR8lTFCY+DYNqDeDqrwZLXjS/+QMdlUyxBTZUNInY4F1d\nag+sW78nu4dlBFZ6GI2qHegf7dqCJS8T02T911Ql3d0TS3yloHzzY6d2jjZx\nplFeynufeqSGa1nf6Bu5fqyxX8gv/JuBs0wgNRfdcq3DeTElP6FuGs+TG5fF\nfj0ApckgWvLENYa0JVyJ2Z8AGDVfRTQd2oi+JaNVwbjvC4+3RHZyPeqt4wJy\nPMik4giggKtLSlOJ2nfKoR7aBypY0M+fo3bExWW7XJsd6c7Bu8CtIGCbamyr\n5TZQwN6jzfrylHITMA0eerrwdcG58xviRPQnZV6k5j9QzhAF528bwWxiFUFS\nTO0S\r\n=q8by\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/gjyV+KrTE3THeB+JKgAfDaJ+E5S1JMYujZAD63ii1AiAfxjI7WM8bE4MUwiU8Eir796J0Dguhj4nrqoyDkwk4Zw=="}]},"maintainers":[{"name":"adamraider","email":"adamjraider@gmail.com"},{"name":"b-insh","email":"bethany.hyland@wework.com"},{"name":"cmugla","email":"cmugla@gmail.com"},{"name":"drbaxter821","email":"drbaxter821@gmail.com"},{"name":"emrebsonmez","email":"emrebsonmez@gmail.com"},{"name":"giladbar","email":"gilad.bar@wework.com"},{"name":"glosch","email":"glosch00@gmail.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"hamidagh","email":"hamid.aghdaee@gmail.com"},{"name":"i8ramin","email":"i8ramin@gmail.com"},{"name":"jimmyhsu","email":"jimmyhsu+npm@live.com"},{"name":"maniator","email":"naftalilubin@gmail.com"},{"name":"maxerogers","email":"max@carrotcreative.com"},{"name":"mhotwagnerr","email":"mhotwagner@gmail.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"philsturgeon","email":"me@philsturgeon.uk"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"weaxel","email":"axel.esquite@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.2_1551426301993_0.5281000477366922"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.1":{"name":"@wework/react-floormap","version":"0.0.3-dev.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0-rc9","@wework/floormap-sdk":"1.1.0-rc8","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","material-ui-pickers":"^2.2.1","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"8060ffbe1c228a471fa647017cf3826ca0551fa2","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.1","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-wMiLqHNkapzna5k0L7d2ZLU2eAZkYJz9w//CxWgKrFmuJnsiqiEYbI93Lfl3hQVwfmkXwThmU4EQ9w0zbI+wVg==","shasum":"9d13cc654c82c7d8d887a23231a4dcbbab185c75","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.1.tgz","fileCount":192,"unpackedSize":908643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfjMsCRA9TVsSAnZWagAA5T0P/A72U/eyYsr3HAsh7NQk\nEslaXNxkPB+NSXWu3Uucm9wWKdkH22MxNS2ABiJjprGDyAinfI0bfo0KhL0o\nVYgAAAhqm3ceuLpwiUu+HBUhWp25A44ecTsK4tTL0wSUicLx2GKcCfCS0n8d\n/P57nSokT0s2A44USFp7CjMqgBj0piNFsBIcrpUXlN0/3atAl9gwFKVNJrMa\nL53dSifeLtQPVxtl6DbOg2plUMjkQsYuZV9CmTkEJac28bqqNLK92y1T7m07\nbqPKcqEaJIg98cU6nv64r9Poy43bTR14cKBou97rdlJdjtRYHQRrEifDJE5+\nFCulxM2cD2ZMLFnqEj4qm/QFW8dHzcRLeOKVwQ4gIhXXlX+mllBim60YCxKT\nN5/HqOvoeFsYGCzft8Qig4rIGRBstvcZy2BluLQerCsCWhkYvrG7Mfzm0cq8\nuXWpTc4z9qQo70SJLFGEYBV4OtFjoNtzCnO7emL4kmnHIHVSK9a/aiyvgO+y\nRMkAXwIfHDuFRrSVPHtokbPdpublVwnMiN76AeJbrHr1w1HwNd79+8WZnB/w\nvYsa1ncXdsCwZHNKETDfeYmh07o8u1Jml3EifjTpzi96G3EmTt4qsWX9CZma\nDDRoxRvd7LUYia05kZnlgvbOifZ1b1L4TwEZohTYjRvP9MejGxPdMFE3rFAZ\nNS+b\r\n=mtF2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/3jo3tHXgdd68sMHlTKQ1ttb0ZFmgPDxArA37rKKufgIhANqMWH3jaywz1jT/q4dDs14rBP5Bmib5/DlZe1u4tSMS"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.1_1551774508013_0.5884262908145417"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.2":{"name":"@wework/react-floormap","version":"0.0.3-dev.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.0","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","material-ui-pickers":"^2.2.1","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"b0cd25a99b0de8ac4cc28cc856cefc422e82fefb","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.2","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-XL2gJSdR/4pTjsGDwFc14247QaYGx46dSEtrdhePIaIltR1kCkOff4Oydk/Fq7cB9D4STGxCh1qmQ5ijHk9N6w==","shasum":"6143088f7d5f0efc6b06c7d736f1850ed033caca","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.2.tgz","fileCount":212,"unpackedSize":1128712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfjkTCRA9TVsSAnZWagAATksP/1vsNVmn9RKf9jqinSw3\npzxjD4Ae6FPPytOU9PWNQ+OpSbrChiUBhyohZscyEdt93HYt5JiVcovQKWnS\nPAx7qeEPYVBRLHSqHPqfqj7bATL3xYI9IGCNRReJ1R/pra3hpfohk+XFJZ6n\nS6u9lliCSvTidMEcfwrJlyAf4YAb4JBFBd6sWSix0DPgtVqoxclpanuZGrQN\n+ZVnjarGn3tLBEwB1FHFZ2SIAUJJE6aa7vXdhOZW0YXQssSenqL+fBPiVexu\nMtpArq/zx7V+bBcb71fVZdl/IUUqEwxgJUXueRxOA9tVMBY3J2qBKv72Z4P5\n42jaQN8HSuVi58f3edCiW8oHiIWgdRLUUFt3xtHlownDtLwF5BvaAF/z3FqF\nIYpOoUw1WUXteFPbXSZ5eg2sZAIh8iHvlgVI4G7xBdCoMyKpaSSlHmWQuCTq\nwInxn5EGJhoK9+YR8PZsKonJ06LaqCCrLCgmaH3ENSwiiwEU0mwpNraKT+xI\njhsjyZx0g7RlQZKSaZpdDVmlddxr/6nsIXxwW3a+1UNvvsRfgFStk7Gote9l\nO3Tgnd94wMUqbsnbSfgij14cvO20+ZJoGJKYUDywdcMOfce879cdFzt/mjCT\nXRYoR4xdbUefJZBVhhq/vdYcNCXngrv/MtlkKLh58mg7cjbHqgisgvXgL18c\nCWGg\r\n=5BWM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGIDd2MwQf/9wW0sfYv/o5UeMi7CGI5lFEjnoCYiq+OwIgafvpFdzjszEtTnIIzP9CNxLy8b5BPk7VpMTyaj2G+z8="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.2_1551776019085_0.17989406921329576"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.3":{"name":"@wework/react-floormap","version":"0.0.3-dev.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.0","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"3b471f8dd1d45ecddccc24d260fad2fda50e5d41","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.3","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-uLsiAIjZ3NMy5iez6IHP5CG/jQaC0pYkfbaiAwLw0WEts6xO3de+pLtM7o3M80/ttkuF2TDZsPDOdq4G/fx1DA==","shasum":"e6ef7dfb156e88b740de7fc00dad384590af6456","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.3.tgz","fileCount":210,"unpackedSize":1126463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfziwCRA9TVsSAnZWagAA4FwP/j7jNQokR+TFeYtoDLg/\nq/VvQCEFnz8z4nz+KsCGMCX2i22sOMy5LT8ot89+c1JB6mIo5UBi0q9lfM4+\nimQMFkuhWVUubAsL97FygZjUlRUNhPwkiIt5x9nWbn7kmY85Mfl9hS865uKV\nRw7azj7sOOa7yXHPHRLbqjQsU4Ymdc0RwNzKkANqaZR3se70EWc8iS4pDcgP\ntA5o57FvWyiBiS9s6lEU8oU5PHpEeambW5cZsoYsrxkN31aKSfVoG6PA1a8/\n+/pO/P/uIIqYZan6py78yWjrwZUe1kI4oToWkc1Q2FBaXfNXOx6+7v6nH9BQ\n7u7IUyf7vHDvwGI0DslO8DOkC50E8zYLR9NEbiKMoL6lyvUzTI03Zw6tq5sW\nN6rBp+i5/Mqy4s1KWscYx/ZC5ci9kj+hxe4K1WT32tXpKZyOgT0RAAvsA3Tl\nkRhropCAzdHBxgR7ZlT+S9yDzTJgJWFrXbXtaYU7ErukBTQK2+wbiHUfPTvF\nOG/NLdotOizg30uj/A7RE+FzdsSxk43/YE8F2FWOJTc3HNiQMyuw/flXsfSF\nGm7fLrbS0SWhu8KXIuo6jSwUCNBrtOrjJTgwd49VY2kn0gLrHyTSgIhy7Sp3\n1tELzpzmNP/X9SZJjrn5pH2s5Nh4jN/LlHYmuD91xcOh53gxF8mrWti8sbJ1\nbpBP\r\n=YuMQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsG/cJh8QS6misTe+Jq4E5Synj2E2pyiKa48JbtDxcaAiBF41YhYkwubI7TfepLXatlm1RB+WeQo4BuFxoL2WjhCg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.3_1551841455290_0.4472649774105615"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.5":{"name":"@wework/react-floormap","version":"0.0.3-dev.5","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.0","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.2","react-dom":"^16.8.2","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"7af008c745058f19399b82fa3bcff4279a89440a","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.5","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-hg/KNqAAExt+ww+oG6oh04CMymwLfGznYaaTRMbInD+zkzBIok3MVbtuWr4/SmFHF6GdPQ3gh9pVX0iWtixtUQ==","shasum":"9a791feb48af25bb2ab106eb27c52df09ffdd429","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.5.tgz","fileCount":210,"unpackedSize":1136101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcf4WJCRA9TVsSAnZWagAArRMP+wQjtOuPPP7dBsFeRtux\nqW3Iw6nBNlhk+QCpNnZeAgnRm24jqeXzzNtVGa38ta6Xn5fZrH/8EqKrSS/V\nYB4BKUzu7opTnhmQfYbIO5XLtJaQk4bgB4EzTVqg2UyVb50AUZHHdivghWsg\nXtSEa3taiaHdM11/xtd60wnjKlHveVrZeLmQSr9UAhjbuLZuzbFZLl8846TU\nRIir76os7Lq510D+WkhukEOfhuM0XCufz3TqFuxdCdEpfV2RYtKftuJXzaUi\nBcJfJy9Dxq0wY2nL9MeHf7amtZjJcCAtuzljRgu3YFMlRrUmIMzpe5sZiEkm\nsywNSsZ9QbEKs5sBvCu015sBwuomO20uq4kyj9uVWERR0si+MuRTdCL/sUst\nseRTuWO/V9cCmenzto+g7Ev+EFoWO5rhdp2rRGx/RooEyZ5BhJYUZ6pCgd00\ne9H1CVaT4NzOsS/RhGG0ME65DH23ZMUdipuKdbSHPj1J0ZKT1uJzlmuTW70S\nO6eyXZXhL9C10ZOmeuSAMdqBIkE+Rmy/8QCT/7UXZ48UCB1U1mYvwOJMNSIx\nVWxm9oh0p6Fkp4FPWPxJaGtnxuCOBDMzYkrFLdSTGsLTNtzqUjyhQZuy5mPS\npdubVGoflxplOKCPw/WnVu/YZSfHUXz+mco54ntq6SNuDpuCyUaP0GB6K8jn\nK6Z2\r\n=4rJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGUR8k+NHAmbhwqFhA885ntc7etVglJNiPAfuW5WRVDAIhAPkhrVFgL0Se37vDt0QPo2/JxNkb1d2A7qnnUVBfa+qa"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.5_1551861128690_0.6076838258338908"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.6":{"name":"@wework/react-floormap","version":"0.0.3-dev.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.1-rc2","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"ffa7eb73ae9d54d027d327966a5bd0096b1b72a7","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.6","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-SQiE6qh1g6OjbpsbJrrAqs4eX4VN4dcYefRWSh93YOE53vhquSMRqtlLKql70leqAVGyDLm7C6xHZLiCBX0VJQ==","shasum":"9ac732397711e3b0df80d2b460715e37b0bb1a12","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.6.tgz","fileCount":210,"unpackedSize":1136487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgIDOCRA9TVsSAnZWagAAaPUQAKB/pabrhCSHpAzgHelq\nmuSKgKFi4ZgcVPq0VrhYwnOfXpNXqTxZWQraO9j+CZkWqWYItLsWOC3RrYZc\neHRCNJcIBfjh3lPWxJnSnUrg+OBoTWvlNU+I404ph7QPQ/txaueZt4ulxxoK\nEaG2YPkYjzfrXs6+S8en/24gVmbYbNvqAfcnXsNmyo0Jy0LB8+HinXxmrtJs\nVonocUF15Dcj7R7mGNieDp/nhsYDEuZPRTgD2qfg3UqWEOX2fWRtjIRyqQSN\nYa3kngPKR+sPbgGWPSG83yXDdNTEYxbBEJRtwJOT0IUCBboE6uFKPQ+uKklF\n4F+vAd2N8DDUaz8PhgtSbcVytGiYD75Dz5YqQdZqEfE5bQkAHopF+Ug26rJj\nsNL9VRCh1sU78LW/WVKsDJ5hDY3Fxvh6XdBe7HdBMMWOKJ+LqKpJq1R69Dfo\nBuCllZCfesyL65x5Mi50EYFlFTNvBW1FK4pDAHAVFaTV8fr3Ik9ajXnxWqJg\nrbD2+3qAAcE1c9IvumoVV57ClzziYt3QHlIs8uIhmUUxN3Ad9J3fjp+UuFQT\nHbB+pMo139haoLBnlPCeBGew1SDS+uop7oMpdilAJ/cGiAITJCmW7Kp13RtO\ntQ+1I6XdIO86iaLv2a17NZZJtsTvdCoOzGAsw8n3gE1h022NONkyMBzjsmId\nOx4B\r\n=rmmf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJBXXy20V7aRWMQluHmwFAWFjgWIUcIWhTgIzptiDE3wIgFwg4XKypYE/5yFFQkiE0XdeNu+1wzr7583pLPpzbeCE="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.6_1551925453483_0.4948246113997077"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.7":{"name":"@wework/react-floormap","version":"0.0.3-dev.7","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.1-rc2","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"c5d73393233993ad7ccab2675ebb1773fc494dec","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.7","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-MO0wAvw0fj9E7dN4HB19gegdHx51PXQAbUMZv6uo0Z+CDhWICC2k225XI7ooPSES++VaO2Rt0VmT1sQ+06Jk/A==","shasum":"f308c66ce1715f8e70435aae1d9d678c84ddd8ee","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.7.tgz","fileCount":210,"unpackedSize":1138262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgLi+CRA9TVsSAnZWagAA8y4QAI1IM534iJ40owqWRTk+\n/nvNzLVFO4+vRnjDmx+qdGnSpGWIuWV939cEGWz2WqYa57VXgpW4rXC7PRAg\n93v5z+uuZcHtL7K/AyZfTo/pacV6oiT+I83Lvq3FBozhvUWcpd7tFAOhId33\nfJeTNcTC5vJj7mWXO/NcMtl87YTQVmUv7H9nTqfE36e5fsq+5lvVlzWB8p5y\nDnRUoBHxBAde4ZyuXpIe6fPprxRaug0JovwEUgLYtWD217S4UL4MJ1bzvjxA\nKXvWxjp0r8z88CwH73swsKom9dj2qa7VAR1V5+0pEj9Sz5Y1QQ+zgM+2JuTF\n6frJ16458M6T7dgMFDkOBvD3Ijl8WusCfQcEZXVhWmpsMP1X68CRiejyY9Ph\nCzvZUhXmDWQF0GX16ULZyZD5f5GDGpsHMNHQ7KMPSd6kPk7JEe8uG8giwN0g\n+9YzAtp+0sCAISq8UThwT/U/X42vxhTtoIfGOdy88vJrfBhXTFVuI2hxzpYZ\nL7l9TJiB2yT+S5SUJn8ei8545u5rqo7l89PWbWZ/z2YOoc4o+jSLUP3QaW64\nEEeXd2TkUc1SDasG9jpyHfPMNiXKE9H7fADhFb9QFHk4o/HaYd7tdvKNZGOj\nDH7b2mpaaiZVjlUD68GFoamO7BacGHNBLN82skF1Y/7LnXKEmtQtxtybgNW0\nqZCl\r\n=VUlD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlOmyVuNJY8X4ddkOIRJokw36syDzLXiAZhR1/61cgTAiBgcYcB+PlDMPeh74vREjnkDlCm974u05rXtuYwgkL/hQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.7_1551939774109_0.7512970779355479"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.1-rc8":{"name":"@wework/react-floormap","version":"0.0.1-rc8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.1-rc2","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"6ba433e6c3d0ec429d22744632a5f32eb5eaee5d","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.1-rc8","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-clhiYXk5QdUTDFeuwmUdrOTFCmfi8rIIPcdwKNVwdfdNAP0qCqSTffj7sMkGD282oszHPp4aQf5v/w93qcAwqA==","shasum":"5e7c0c49dfbef17ceca1055dca235f4ecf5ff67c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.1-rc8.tgz","fileCount":210,"unpackedSize":1140022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgMjZCRA9TVsSAnZWagAALhYP/iJvth82iTaZ430IVM3a\nHG5Dp+KpKbbmZ0/9QR4AmSB4Ad9EgfdAsBZ5mLejuZPLwGGRAMcgFKXIRrvA\nkNaPAbjpYuHz2vV+TZWs9i8kKeFlTt/WSccTNmzH99F7lhKb1ZuS7YsS00su\nRGeJkHGOKHzxYN6c8545TsA9+OmWRBaehZrnzy2SzpmFPRmMc7B6IhsZLehh\n/Fc4RM/7eMqrGi8yH3bamy5/Ejdw4lc09GWen4GkGaYZO/SxK9/DiVkKQwW3\navZv2KCy9NKb1vCOamzm1FWREp01PGwjW6Vch8FLZntsJEpaXeKswKFO3fA/\nQM2FEhVAB659JsaOxM0BOnxv0n7AmLKgOsg59FyuS7n1rBx1pDgeQBpHhLS/\nCSAb05IGkPEbE1sxhgoBbjrL0sNraP/sAjN52GEnp2ybDUvwe/1cFX1lBYWu\nkHbpTP8f0kTZWrO6MaUqufRtiPJP5NNPh2ZyJ02YCdY5MjiJr9EJz1WD0gDI\n3loXLziAtkYx1aaeG/Hu1EZIsy/GemG1nU258kpIDGMVFY9kIOc3ImKUsFuy\nYugK8uEriNVzS44WPmZpMrC4PQNpUw2dQUvzQ4zrTUjBKS9DvIdJceDYCNY6\n16QhZRL/bLi9rRa563eAmzdhO9GKIK8/vcxPoOkEmDZ5fH24IlPWmSTaqA3f\n0RDy\r\n=zLtz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCQ57zPa0ffBBx68agrSXHFhCHzcqxZuIB4Gmi3eXXPAiA9DgMftFNj0AqCAjMtL0fo9FuKt86d5/on79ziEwB4sQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.1-rc8_1551943896745_0.508527780049771"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-rc8":{"name":"@wework/react-floormap","version":"0.0.3-rc8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.1-rc2","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"188b0f9888eb90a171e7f84002b9bd15f81f2284","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-rc8","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-NR1CfFPPFoKzjpq/P+/5hsNgPmZltLpnHhvykXgF/kpZwQfJaMsecHxFSACKgOmU3wksPI2915lsZW5oR6vNgQ==","shasum":"d13effed855998864638e2b6a6c2d02a4f9a441d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-rc8.tgz","fileCount":210,"unpackedSize":1140022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgMyaCRA9TVsSAnZWagAAjvQQAKDJ3VpEQxQvp1W5DXNd\nQWu9wgjd7YfnMXpP3W4nhy4iIj9mh9zuvlJXGRogdIbk/k0ju/QnVX1lHnBR\nR3DeKK6otO0MRtLk1NtT5zhF3mhYQcOs+4DPq32vX4VsjN2ZiOH2WZGXrdPd\nhL26dFaavQ6+XwBrhfU9wPGFtK+idBiRTGq66V3d711lbHj9Ij1D+vaarKAR\no550ifKMZL19KfdcgZSYiUcPRdIP0IFaBy7buAMRVTxNHEHK3RYcCjzFTVbn\n6GpaCRfexFfe4102s2+I8JREH9UjMcquZi3bOdFdvI44+Q0i077iAImdpNAk\nDPWlsSUB9/kRMm5Gqnt0A/4QpJojmGmRkjGnADaS3MLhAABHyIlU6xI+ESRy\n3YY3VAHmlh5xDvY2WUjQLFSpCrdN4HRo1wY6UfAAhPwZUY8LpSTLU5AAHI8t\nQ51oUXAdq1bmwc6MRyGEel7lCzdBDSLiu4zbUK9y60qOgkVklTF1DfhjzFj/\nuechyEmAtEHkCwiRwazOEETTYQcnu5yX+KC/7vaEFTnt9cqviJMze1w1fHV9\n5pMZu0TuAUMKBhK5pSTzPVL1aVgfiw9qDFssfe707slIaavpX7AC7orck+Hi\ns9dx4457ZpnBb4/54a/eO+8J5rfleS7Ses8rVO5VaYTqVjuzgpjXL3Ju40jY\nyilZ\r\n=vgFB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/ZhRABJkmUh7Jy9UyJ/bdljxZKGeb8czRkrs0OB52OAiBHAQiwrXudwkXGIdrY2Z27kal+SAWn7bGlG8H0m4TZFQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-rc8_1551944857941_0.554822652042523"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.8":{"name":"@wework/react-floormap","version":"0.0.3-dev.8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.1-rc2","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"188b0f9888eb90a171e7f84002b9bd15f81f2284","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.8","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-U8InzlXFCht7QzCncv+FmpBMtR00QOtQm7nvVzvmWaXUeOBtPtCwYRwxJuWrslSVCYnAi0qgCCRdA50kjXh4mw==","shasum":"bd13b41763f12e94fabcb445a5f50666f6262043","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.8.tgz","fileCount":210,"unpackedSize":1140024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgMzKCRA9TVsSAnZWagAAmYoP/0j/KAQq/GBQciYJxeAf\nm6u16SGi88tEUx8Lk3TYayYcS4o7UwjDfSOJ5oksmJf72aFrBTCQ3wvfxSFp\nWVYdK77MhSTSfAU7CcyY4Ngyp81oJko+617Mc2UvD3bYT2uK1KKqlm/f2Uvk\nbtFAWVHIuOCjmOy8ReE6tB7EN8Ta+Z49943UV7ZNbUCIiwFko6yL2o1pZZhz\nN5A2IJtyHvA9kQJEjmdIAtlw7CYyo8Tq5Fxo5CVVaZdEX/DfDf6whsD0Yu15\nbh+FPAQ5rmLph4/DPb51ottS7OmZLbQI2FuzG986NxvFrdlmZcJ6jSQ8Plpf\nPrFhAEOX085uz5fxl+EiU6Xip0GyNA+AyDi8FbvJpnIZSlzX/aQbNkh3mNNF\n9hl4aLMSZCX0T29qDaOGv9gnw/TogFdlvtl7ydUc8AjnDiu8PZXGehIuXxoY\nlsK9UE/ha6puazhFm/dIZJOi06HX8xVVgFzwFPgat/hj32yJ+uCDF8cbFnst\nbYBFKXqWm4UA1kFS2TBsvgkOBo3TY7xxfA0EAomHsN7tYy2vbmcZvx+HBWg9\n6XSQq3P0I3bwHwF9l4FcbXhF343mmQcwtlo3mUwjgPl1FsIMiLEez6X7Iain\nmXlAjIhRGb+Z5eLyNVFJdt0CSRE6gMMEh9BriAer6kz8COgSJnkbvEGEpVyZ\nCwMU\r\n=QqPi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcMtpY5xF4w4joOy2zTUK1RIVcrgZSzveq/VKDMMbwaAiEAq4rvAX0P2LRBxxi1vjhz3y0eZhIKscmRBdmSARh4wLQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.8_1551944906163_0.659875653837807"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.3-dev.9":{"name":"@wework/react-floormap","version":"0.0.3-dev.9","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.0","@wework/floormap-sdk":"1.1.1-rc2","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"bfe114c051c223aacfe956856c389133bfb5707b","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.3-dev.9","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-wizncN+AdqUxErX/EUaPF5Sr/e1/lWIadwBdEiCX9xo54otHS7pJnK9DH/d98PiC6hpWUSKf9vxvqeY80w70Aw==","shasum":"84bda336f4d15a9ab77aea0bcde81c70a2b10649","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.3-dev.9.tgz","fileCount":210,"unpackedSize":1145222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgScTCRA9TVsSAnZWagAA8fEP/i9m+tYGPhDKwhW0clph\nXfPoNGHTPHNK3lhXHj7S9EMKc9e/jJXP6qJ/Eny+CqRxKmgi/k4VTWiQJvtn\nwnyB1xaXZ8vubSaTlRaQLEfNvjWvWK2i3SltkVrIJDJ92c3NWkTckM8oA9iN\nZUNrLdi9IX2ccPDni7Osqb9xT2uwRMLY3HG63r59LoSjqF275GB9POnAr1Ut\nD1HfNSLDkpOxDIT/p3DuJFw2kKD6fhCNHljKti7xDwt/aRCPJuYJ5PP4So16\nqPt5OSrPSULbSS9shBE0gKvdV7i0Uwk6eFqJtOu0qC63kMlLKBVx0OrtkPZf\nrIz6rsX1gd3ITiCbUkjn/gaUJY/H4QlD7i8qw6U6cNEEDsGPUMG2T6D3JrYP\n6z0cNckuTa7AElULmLyxtcsAEnukyh+zF7hM4fd4kjmfVNB3vwZerblgrjQi\nS9PeutwJ4C2PjEoGNei8dzDpyKGcpYW4sPLvB5j6bOr0Qh9rMaTAaYPySxZL\nCIfTbpx6FAzAatp43aPRJP/kuvvxPJoUj1jiIH6/LmN7V5wpuP6vyr52lFux\n8srOJOExzmKDpaJVwrX89CAmR0UoA5Viq1gC0nhuzu1rd6Db+v11X+TJb5ad\n5zi2kv7OEimjCtQKWMFTAtAlk7/vBlKWQoRhSX67Bv7O6ChA4lmI0XZ3HG/0\nnkBo\r\n=3lGL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmpQbShuSX9izG2lOK6kmMNks4kc5Z+JlnSDmxxujSEAiB92VhuqUJG2d3BmW9bpx9ccfu3xjf/5ikg+OfEC+5G8A=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.3-dev.9_1551968019130_0.7123528941169552"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc1":{"name":"@wework/react-floormap","version":"0.0.4-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc1","@wework/floormap-sdk":"1.1.1-rc3","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"920b78bc72065f278b305157c44d1a11da2df12a","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc1","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-idp1E7ii0pNjlLbTdMj/gLA2yF1ZL6jCODxEKLOFgJjGPAquXCmaak94pMlBqQ9LeTjUnnsjOEj7fzse+cNQ6g==","shasum":"3627c74732de7f7bd867b4aabf009532dbc198a0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc1.tgz","fileCount":210,"unpackedSize":1145296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgTMnCRA9TVsSAnZWagAAeLwQAKC5hQDdF7pgr/tpY9Iv\nv0w0ovj+1GADe+PbVX0fltAPz4VuM/M9WOVZ7tWea1Bsh097p7K/l1QspL/C\nL+jsBW7AKeWiJX8AFHLNhHFVAoUja9g5ZucLjSfiGBsqSgpgjcWUOB4kcypZ\nmpMUsBLGlpPS500yn/UHIxE1upRQ6D6YHgRHzoLz3GMOT/1pBXQ60A18463a\nqtlFMa/5l1JYuhmwc2YGOPqDZJoEcleKXTX9eApEq01oy9iqrbEDBsrnxCrZ\nE8RW0Io4tNZONaRNNxZ2oN4ZCvWqsVcPXAc/zE6h841UISWUYhsZvtyQFuX5\nmKmLDrtiEu1umTOkpEfQ/pde5J9SA9mQH/jDbf0IJyidWvTpJrk4HhWdcdkq\n9v+3xBNqgUK/KlIPcUPoIsJaUQdbzFpyde4Z1aKo46xcJ7sLBphhdJRC9aKE\nEiiVD/4cgexkGAIzWPN8m+xHubO8E+dCJmTTf32nGpLhCPML8qN2/bdn0pl+\ne7+RTP70RvV0Ej7JjMTPsucRUuKavdP6OPlczoc81GTqSCdPOzxph5Gm8UkU\n5AMdn/dChHJIPUJwas2FEkZrT19ha0E1WKUmZIGM6ULT0CgGFBYfx/BXYWvA\nzm5IeePDnINEIib8ClSc7rFzl/GXwfw9T2kWG3nA8EJ0KKHXJn1aD/PhPmnO\nyXTW\r\n=3hYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJ3dR8amkEyJVN0gSSTTcVJhiH+j6J/fXRqKDlMlsCPAiEA3JNJ10PbEsnvyEtKa7EdzE2LJtj3fTQOMVYU6yh9VMU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc1_1551971111311_0.49918411896852777"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc3":{"name":"@wework/react-floormap","version":"0.0.4-rc3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc3","@wework/floormap-sdk":"1.1.1-rc3","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"e36d56bfa65670282799461fd4edd64484d0cf09","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc3","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-NJ3caAkspwWWIb8dhNOONixz3Ff8XOaE2EQoj7AXFCzGchZ0GtPkineidHD4kMlKIklMfal1hgDov56hchTzRA==","shasum":"d7f06c910692ee71e9b57602a28f8732bb507b9f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc3.tgz","fileCount":210,"unpackedSize":1146552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgfCpCRA9TVsSAnZWagAAQWYP/RChZEN7dLLIO5op2jvT\nAdF5MsFfOyc2gOmdm5wS2pAu3avdXB2W/dEbWBBDJ4sX8eEEKpbpE3o0ZQ+g\nttuADUCwPsGwEBsTKg9KIORAfzbrcttTO4HsM/qqa5Pi9v5Qf1sO/WHM1m7q\nblC7OBXWbRDe0D3wJpxChCy9u7PtYPNEHADJ5Q2A4Gk2fAzMlwdB6YFgEQ6d\nDUVGkAZSxbETSoYtAJSgvL4K+MWLi39/4lJ4vZjpcikIT1wEAKyMt5Nvazyk\n9GuaJyht2B9bV19OM8IRZ0oZ2XuYL989BxItUkx/kxGGyjQqXAYjw7i8zH6H\nY/EoArXR5WPyf22C+G665BxbY+/Zvj+wALJ84cYdvVQD4E4B6vEtHWl+nota\n74NUOr3dZXWZA/abND+2Vq+wFbUZwYYHKP1e4MSVnai2zAmotvcArRkg+nNP\nVrilN9Va+e1tthqBrkr8lxB04QYU6DjobSaZ6PCh3sD9pXqBqoV/U93It/61\nlth8PFiwt2yFbsPjT8zEPLyeeSeBUs5N06L99gfMpwxm/AtvBVBktTGaGj7/\nFa23TdYC7JhktoMnhVM09c2EJ/3CfZS4zhQur9mT22VOnL/MkU9MpogTxWnl\nsz4hi7b0E/I/obgcDNGfELuyxBYdwkHsonICtBurNB5UmdutoRxoB82oTIQr\nBRKk\r\n=ZL8J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJgAkHLZB1AN6ytS0Z28w1y5vX7BwhVniPwUBcgkmJGAiEAwBo2FOWXpnR0Yb/qHQeFzM2OEkgCfgsfGaQwIB8YL68="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc3_1552019624943_0.5759139988049746"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc4":{"name":"@wework/react-floormap","version":"0.0.4-rc4","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc3","@wework/floormap-sdk":"1.1.1-rc3","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"b83e1a1d090811285e18a2497238687c5ca2488f","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc4","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-YAeeZoUQJCfdcZ4WYURrKrhN0hhZYVn6jmrHTdzd0a8whqLcfJng3ExFOjGrdJ/Lei3JCrJgn10E8JbAZ0tVGg==","shasum":"1a8c7a9ce62172076061ad46e6dad842416b41ea","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc4.tgz","fileCount":210,"unpackedSize":1147770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcghArCRA9TVsSAnZWagAACLQP/1MWtW7MKgpGE01LCO3l\ntcnnT5CUn5255vbavOPhyfY/g+iuQxqf6fn8VDn7SKE00Jivqvwo29BVUsge\nFy1v7wCszMpUl0/6NxoLR44Jvy+476ZZc5PrD7R0syPZ7c6aiFiv9lYH/EPG\nQ207YePqinh7w8qckSts7rYOVIupbWDGAa8XIq0eZ95MeskymBC/X21XhbKU\nsRepAVEvtSI7I06KeQRFed/KPHtWGsdbdxd03Anb/jyah/m0fUEkSGlsvvLO\nU6cICSNtjWeV31oLOzEKdI8wALFQNNUUCMwH3RSOJQ1XPguD51MGJNGx58ZY\nUbF9IFtATkwxCZKJzmXfLGtVcjjUnv0RINiXq3Yj30YPc4U/hjQtYJ214EMx\n4gg698qWINSnLeVohS5iHnwU/4SS17uo+KsU1QPzd+7GujRQnwnaHyajRxNS\nixRJB30KHqJpbHAJtlqNvbvdz5V4gyrDM9axPhj/Qc5GbUTrUsUSxaeq3QHg\nljvU98Iqle7RX+sXVigr5yBhPiZ+Z+I0JhjgAi84Y5qmjpjACNz3uDYcqGcb\nbY84quJQakhQvQRMf8ffPpACA4H+qh7NV+t5vXT1jAUrcF1JnipPcZALASXj\ndDD23OeSa6j7BpSjgKlr0YzlFs7LUKXN6raJjW9gL6RpHW6DlTGCVxz7pj8k\n0MSY\r\n=1Ftr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxmM+EW4m6AbQ0gnag6KLPrHL/mN/lzo2n1QkuqNK8VgIgC0/+XPHOjxLqPmFe3bn847qTHlmjKzNi8G/yMG/IAtk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc4_1552027690713_0.26547850492843406"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc5":{"name":"@wework/react-floormap","version":"0.0.4-rc5","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc5","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"6d40d87fbbaa04520000bfc69798c24d31e3d234","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc5","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-AOQrO8HlY3NykhjSpW8ovAzZMADnSXSxH1hHCv2Ld0koPWC9xcvM8BJK8oOk4cq7g8VCvz8na1a+VCoyXjp25g==","shasum":"1cf0a9d7e27914088e9c71fb1b6981844f3d5598","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc5.tgz","fileCount":210,"unpackedSize":1147928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgkK6CRA9TVsSAnZWagAAhyMP/R57TqIYXV2/8wIZheSI\nBYgYytxPcD01rebMDK5/e2lGCHPj1AqM3xy8U5Mr6I60hzs3+kGEKsVUSOvP\nrlbDSBxE3PmtEBrGou8/b7SfLGJlxCMTX3WOl5uCZIUJ87cCQxXheTYhPLmM\nZrZGm2gzSfj+zxiEMj6YWE0YEXpK3UXqYlcjdz70QSGouSg2+BgQSKi6KfUj\nXVNbnkaPt7TQNWV3tLm6gtktU19dG64XONQOXreSHyWnrQZLaGkuL4WxqmGW\nf6u9N49sy/beP06IxYZuYDV6JpZUwnTmoFKB1EW76wseb2kh+/4/E3c1x9WV\nBUa0B7s47FTICfyWADmPKKzhR+GeKf24tJVubDbMZJki6txSK6cYrruhVhkZ\nxren/L+GXG4BlGitCO/wA0XXoJkMqOlN9/c4WDquGt2NTwvD2uNNs/UzCGRL\nxkhWslMXqpICDDzqhqiKjAHTu7Wp7bNgY78ob/HTtm0A40KDJzAISEw2sFzs\nXwozhv3BYdVAcwHJAtxPLgcrvp5BLm+rcqyTnWxOABg/e/PVrvPYkMTFK/Is\naJAdUW/CIIGOyvkS2kj6l7MW40ynMyhSbih66tpyBCw+QfhbbzljJV4YqU+a\nHUP3rdCGVWYAJ7hhOMO0yFedifbHXDAgMIZktx+ESqWPCsuKnJ2Zf9G5Dcw7\neHuL\r\n=Jaru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbLryObCzR76hV3Htc1XfE9/2wKtFCQUJPmJQ9nOjpEAiEAovs5EU1MVOj7znclSyNqYLin8r+yscZBW/EALX6/QhY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc5_1552040633743_0.959797125760153"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc6":{"name":"@wework/react-floormap","version":"0.0.4-rc6","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc5","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"e7019e3468be13daa81a5c5fb025798148799dbb","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc6","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-TRpU8w4OVob2MKfvyqRFhio8ziZWTsvVX5SBf74Zs5+edjzoGAGTI26Ln3o6xQMfB5WI8rMlLeudnFbIv2vSzA==","shasum":"03a55196a5fd46279f1f37a3f2461e0f552b55bf","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc6.tgz","fileCount":210,"unpackedSize":1148126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgkr0CRA9TVsSAnZWagAAsAcQAIGPQhZYkjs2cEeti7ph\n2phnQki5uutuoGJwI/Se5FM4rpDtUH/3yk5Nmnj2oMdsXqW38XUXw5+exdoe\n76mH5L+gMhyKmHNIUsJYi2KGoWBYnsw9sn5dYGyT3rb7QWujYDYFw+iEFtaS\nR3yPlMrItY5E01b+/zrOEWClmLiidhtbfWvePKVBEV+s7n7LDve2ibLolEFH\nwS9SnjJj8li1jGThUp82kL5OzncRPrz/n2F23p/GttnghOaCiKRU48lv/ch1\nlIPtqn4mJtOw1+MV6nipbjn+iKW+3SPA7FkWcxZvD1QqyyODLaNePxf3YtE4\nspVJofO6aXzDOPhni6zA6M7ZIGUseUxe0iz37BJSvGWocGvBN2ZnFsHM4AR2\nDanuOSwe4QR6Qnih+DKkrdlXew/3Zbon7o/+gvtyDx9TyFz/KzeGT7gxrU16\nBiy6gIGvIRxOOz2Ew+UpUkfD4dI9LE/9iW4KMC4DEGXssVvdPtk2a1Be5WhQ\nRULOEHbo/9nbWZ0wdnqKTyMF78c7kENQlyQs+ku82fxc5bXPtmyi2PZ34EaO\nZVxCuVwvO7k9baRTuScZIK8eguDaenvhvgHlVYK2MUd89ejw3YUUEVJoJfQD\nTUP9jAVNyFuIFJqnHjVdDzWc3Y4hdPSqea7rSMUJG1kYJmokCnpmLs0fGopI\nbIsa\r\n=8i1X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6QrKImPHI9bow2egn7G1fQ1BXiZLbC46Icu34z1w17AiBsXvokoLg6vBPx+jEDgyy/1cjsxjrIPcuI9kedpCa4Sw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc6_1552042739362_0.886132426872396"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc7":{"name":"@wework/react-floormap","version":"0.0.4-rc7","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc5","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"7a4503056f97cbdc729a65ff6d6def161c285ec3","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc7","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-2i8FnHkMtC5UckNV5Dlr/we4+GXLJVdwSOoW1RF6/VIF6Ue2J7VDKKtPmZPGhaSXuSwe/r5xz65aDIzr66OPQQ==","shasum":"906a1245272635c0c823db428f9e0bd485e774d3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc7.tgz","fileCount":210,"unpackedSize":1149064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgloRCRA9TVsSAnZWagAABnwP/iqKJTKOu6SD9bVNuK4J\ns78ad9JFdGzbcvdfPEXYNGB77Y0FfFXrH4Fvvpp4d1PrKWkVZmHJ3wWidSLa\n44ZUSs3h8eiLUH/p5fUW9qyYuQu16WzBGxYW0XcwOTZ1eCRBJ7RnpYbbA6zI\nOyXnNCm7tJiuFasYXAfJO7OjKoZbRy/2J9JkysYHD5G2d1iGGlHg9gwyDEeg\nym9a4VtbX74stvqekdt5ooR1DIvxHOAv/7+z8dfgdwGn5OKbh+i6zOFoKwUH\nUtHZ2EE+3uFkK9gxzyHQupPPyqTmBWAXm5XU8lF3hYgn45plgFA6Kwia4Off\npXjxxyjtLCep2wtPsuDI2wBH8Qwihi+5+QO0roGkaSTNzAUKIB7yLcEvAB+y\nIZqsgWgoEnq99OKIR7zd7iP+//+hgtvGDd5AIQfhID9Wb4l8hRW7Dg4t8g8y\nhjWyleozzR0yahBoXEf9Y56wWg7bhEFOzpG193KOdtbyVc7zyKYvRDiRstKO\ncSDTn23SAxz4RIcirTxOEY4qrQ1FNz29JhUAF3BmxkdmEaW5irAmqLthiQ5B\n7la9LCJbbnFpItZDUbKSdytvYzOlzdu3HVL2kTlR9WbBV24x6krS35s/Z+SS\nENQsW1F2WB/Ad3Q3s7wwvknBfkc7WkB3XNhx5pdXIWlrrButLDdJ5Pz8klTF\npL1s\r\n=ThEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE4GUMv2CFllJBBjhsVbKNjy4Kowin+wr/5BdPflbManAiEA1rJZyjacBRNBrG9Yq5KICynXcxztZycrCbQId2x3tNs="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc7_1552046609283_0.8784507968324304"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc8":{"name":"@wework/react-floormap","version":"0.0.4-rc8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"6c935a810661ba3425129fcc512a6c64ca9379b8","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc8","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-pVR/XMcvUlPqu23crCafD4tbDuvE5rau0VKOzhgxcsS/ht3TgFXPIv9P3TdsfsL8kW6iCb3lH+g547pD/gETbg==","shasum":"31c17410933b08b247c3991ed5fb476c31e8f584","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc8.tgz","fileCount":210,"unpackedSize":1149064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgl/uCRA9TVsSAnZWagAAtPIP/1k85UP7DAEvoiMtjChw\nlxio5B8Qg9JScYeXsZ9FTAs1K0u5zTjXyayU9KaL4b56zYgUUmPy26202axZ\ngbt+5429gL5RcbDQQvhFXRcWkY6RJZ6A1k2CRCP3kSxAWIqORD9VJEBjgrpT\nkpHfKIQUeAuQKJIU7iqu+vKjh4uYIH2AnjDCH0zA2qiKMCdWL3LpaTeREtYG\nHWVgz9A9p1ijZsm41QZ1BWoQBDiSGALlfXJ7lribllDiVbnwuB/1r6OPdRxc\nRTyk7brTQMC6rtIe2ZDcbypaV/MaxWa5RAZZRh5eTFvlzW9u+EF+qnFXtfFD\nrdpnByGTpGh2TZJgWOyTYicsZCLW5KcsCRTSHQE1Fy4xUV+UfCdZKuvZ2AzJ\nj7mtlPMRMzfNPPpZMaOMuVxQmheTP86fp0ebXv0oHhYcjtXFIBlI9Ozo7Alh\nDMpq9r2Aufm6+AHtS+mzF/LRStc14ZUe8P8lecM4mmcWZUPzw+wGgIsEOozV\n0q1j3niG/iKxoyne1Me5U8W0CAtgKWIhJlTxNv4i5iKsN2FG8kyd/D0ZThwj\ntL2tQrxhS2SFvW+jwHAb5F1la8ngOFu+0MAaKelHr3Z0ZdXYk/uJin2yl1Bi\nlltcvg0++Ni8EhJdDeET4HELt9BOq74a/+4iBS/Noemf5NkAQ981l1/NyNeR\ntcwH\r\n=uhGJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDe35ZdP5VUBG/zdf4jyHyvSjKC7qKHVWE0smaA+yY4RAiAEscGtJwWkOdoc6/jnFm/vcUOf3nOKpxEL/za21Wia3A=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc8_1552048110106_0.4486607866164163"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc9":{"name":"@wework/react-floormap","version":"0.0.4-rc9","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"9807e988d51b5320e91ea30bf14f9d223786e94f","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc9","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-jMnoLLOoYcddT/6UgOo4ubryNPHnORaZd6Y7ueYWyDnmaGGDNbTcoRszA5bwBAqd1TgDV0qelNOqNFFxc6o8gw==","shasum":"fe9d39aa21dd4de82844c492df6a82f593bf8d5d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc9.tgz","fileCount":210,"unpackedSize":1154129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchts0CRA9TVsSAnZWagAARDYP/jeRH35vdadK7fnhN4SI\nwuh89zJ52Bwhve6V6vbo1kDDlafTMx7SoywS6vzBlUw5Mn8JnydTSpw3VWtF\nXn1e0o7rU9BMzH9kGBhK3q75FJT5XpaH76q8M3V+7Utoem+5bkRngwJrbQzU\nM0CzfSCnkBXGyI1gTTUbi1PQn+fkHL1EEwG4TQO1boDZDqK/sQWQ5WHddcvt\nqCCy3N5YesCIAHiB7FygvVQqeNg7doav5/rESjSlZn8LHsda6e5JFXQPX6jk\n32/7hRtZgios2nfadneDQocN8vXsJxHFXaNsdwG5PvAzcux+xqlETf5NELaL\nyRoKctcp+Ehr3IW7AzG/INit8M99CkQ6HEPneA5wvgMOgEctZ0Ag0Ifi517K\n7+816ypWlPQ+XZNKKCkw5VPA1zjYid6IgIyOuzoeYA1dXtYgGz2jE0XfBXvZ\n5VdLtPeDwjQCmfA4QzNJlYO/whaZARKSMABd17UzXBR1eT2SGx0VpCiAzSky\nXuOBuMnGxLAPgEtlWFuEQtOAwbLHi+uOP1FBA492y8f5kCz24r0ypoqj6TWo\nLLGVGsUkygwOubX2W2e/cfVXFxUzFcgSbVIDuLZav0Y/yC+eBBXQ5iS3UXpC\nkd83MnX+GzzgPYZIgj7H0XtGL5RhcgE2H7FPNwM6kuvOWMT8T1iaoWoqaiLI\nQ1RA\r\n=JQ/M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNGpfjYeCPC/4jI5jikyVVqZXIlhLu2HHT+8bTJ3wcsAiEAmuULY2taqFJi+NK6eN5SszUrGarrBWVRksg3EOifyho="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc9_1552341812004_0.22097454015148976"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc10":{"name":"@wework/react-floormap","version":"0.0.4-rc10","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"f9bbc443c52eb920c27f837d89b93493ebe44686","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc10","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-XTMuSgMNzbCX7weQv8OCBf0Zde4CI5iyAJ5WOBL9J4UxtCHJMT9TH1N8CSr5LvPjXF7F1REjzC+sfewdSn0Mmg==","shasum":"61bfcdb1b46f73b51bf0ff5ef3be2d408edbf2f0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc10.tgz","fileCount":210,"unpackedSize":1162844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvcZCRA9TVsSAnZWagAAQ8EP/0yCzR4rft3X/+4VmWBd\nZePIxe7ogN6fvkcmV10ob5W8Mg19rGTbR7UbuFiVh4NCfMZB7McCjfogr7mu\nNBzMnkG2+DAv+h/jb0ert1PDgDiYlNzxAoK9+gmq4Dz3GCjZlg5ZYFekmJ8m\nkAuz1hpxhhAUJME9ZapI0cKRoLNUe57F2jSbl+Lnm0DkDAxt3GcfrZSV/VUE\nQyAmHpN44GscwoK3BtHU9yOQdAswrOodP6bHdFeCcpwjO3ZIMc7HpsDwsRsA\naLxnvXV4I7KJvAQ9ucitiqrqmfVwH3qGIA8dZOQTNcCiEzmJbOFvbIv9aI3X\n5tc9y15lHS+wIm7HzR4cl6OyNERrUtBoQvpHVxYAVXblQMytL1hnZe6M0ewI\nb+DpbInO4B6AE/MXsiEXdzocCxF6UODOrs0XsNOVRXQKsOlYnatiypSJcSmp\nDbYhp7TkONzICc8zuSrqCEI2k01dixbvKfB0dKfrgBDctWyfeGi+HWZZ9eFU\nktU8HeCuiB0vhkf0g0iOSQaajtS7+GwKrUc7xkcMGErWg4cpqh2GwIx1/JOa\nU0MLswEoUpolesqvuavFGLGYoZHxY7YduzlhsuTdfyiyv3l6GKaKfrOdg4/c\n2LMuKx7D4Uonl96UD7PnjyFJ/lKGozhHUggqmsmM9c65NqJRPxAfMQJZvbDf\nXimW\r\n=9rP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtM9sAb+R25Y2XTJthos5S5flufUNTLXaqfsm9Nx+MBAiEA92KV66cePTBaNEjPPkf9eW2rxqQVPCxt09nzWRjXx+s="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc10_1552348952399_0.5085784362510313"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc11":{"name":"@wework/react-floormap","version":"0.0.4-rc11","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"112dc672155678ed91ed50849f92e3c94800d57b","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc11","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-eYImGw0JqkG7ByYK7e9DYIn0JI0/HpehO5iNNuRNNOyiDXQRrxcfh39UshASAIMZG2n0AtMb1MqiRCH5gAuswQ==","shasum":"cea60b6767efade385a5dbdd9b37ddb2aa3e310a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc11.tgz","fileCount":210,"unpackedSize":1162806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvzzCRA9TVsSAnZWagAAEqoP/04iHJI247zmrPDIJS8b\nyEVMehosph/kmM28bKSVSam2/YOOgbF2UDR3+dBAHUb8f/w3ihXwTEKblhpv\nCBE8JRwN5ElWbmtTdp8YW9kzym6AoNHAtxQlROaH0dPCsjKLFJd8MGOKYjlz\nSYD4xwcw/VtPa+q1bxwP8QrXnrtLQBOB6Zfjkma3m6k4Hq38RPhY4XSRbW6Y\nNCXJneDNs3QL7t0xoa1go47gaT/UKbA35MsQD+mIpuvW+fDDNVz7Kth1t0q5\nVjASQMMuTqswYuy40zRRdZuhwSASiNyY92ZkHvNSJFzI1vM3R/yxY2HNiYqR\nGW9EudgvLzY6FA+wPiwgQRkK623GVvgabALIjLH2kKaEMj6eUN+VqbOewDbS\n31bqAfTI7RnAZyu1FuZdVpeYGYHarANVOf+QqKNzg2Jf69k5XRReuOHG2suj\nqAYWH40vlyin8KP4IVRByTYj+/3LuBLmWQzk0qmV9LKhc2K5kQCtGzTqiCQ3\niewflMLjeYWnHOrNjhFsiJXPmdttb4iuaGiryKT9Q+49d9l2Abuchjz6+FEB\nEp7218lJBiAc0J07xgTl1i1B1XG316DjkKJZrveA0D481CncSDYAl0I9fSyo\nteh8C5oCKodYODV3aIkLgHJWk827nEUn0/Kc5tQfL7FKVZnvMwVMzFSKU8KA\n3Kl8\r\n=aH97\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsST+uAKmKybtgmCynoIfnNmVu+BzZiPonQ/V+RTGChAiEAvFGktd8ii+O1c9f9Bw8VcNOqPhOQfRufFjlHxNf3E/U="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc11_1552350450586_0.7153929084438493"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc12":{"name":"@wework/react-floormap","version":"0.0.4-rc12","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"5bde1156b7813af54266b5a7dc7035a95b09c47f","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc12","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-Y4YmUciCNnMrKvGCEUGXc/9pXw3hMLfjPw40XijK3h4Nvry7C7z7mOsow+VGhTH+5EMphlQIIm5PlDnn9Uv4XQ==","shasum":"650ba5f14089247b26b17df4f125df4362b9513d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc12.tgz","fileCount":210,"unpackedSize":1162928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchwXZCRA9TVsSAnZWagAAxhwQAIG4mRuJaHiH0y8qpOhJ\nHDOddRmGuvwI1ild1klcS6EqjJrPkBP/PhwT+NKdbgSquARroknBJ6howkMz\ncopLSV4VoadR/xERvkBmLVT75i29qQ3zUMPx364EfUhfHGTD08OokMgrPJ8E\niGtV/5lvmt+0Zxj+ZV09q2bq/q6ez4/swaxaqm0fMqUKTmuqmNxIYKw/puRF\n47F81t6TL6mTv6MUr0B/Spl7fTzoSJkq8oFXyRVF132fXi1ccRDTjaoMNDt3\nXVYi1do2ZpGzgVRvnVu3lxdgL2vtN0HWmaH4yGbeOkCGbrqL2IPHdJl0wHqA\nALklhB0CLaHIwsBCa3GB9fNBbXpyU9N3Gs+DaFxVAG18Zu9N1SW7x74e+tRk\nhKEA83Btg1yf7Pp0zcSzUP3GZNZeivzQnjKS2IKa7EMzWV91e+mSb/gDlvvg\nCDCZhUT4Obg20HG2xp6lwa4GgXQMdmmv7Gdc9/kDQdLSDR5PV64gCGwC4rCk\nDVGf7p6Oof4iW28BFqVlX1WMMLiQaq61G8EzLz+ekUUSfUG35sMcJKV3zAcW\n0agj1Fk+TE8PjoPe5imRKMoDs+zmy4JDuhjZ76uyXgPFlahZDUtvgPSkgKbc\nG+Raf+npTIiuq56d883roR3inYCiyScPVkiPdvoIbHBeKLypwiF2rSJa8bYv\nbJSj\r\n=guts\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIWrKYocU8vA+8RSzcG5y0+PasobW6zFNZEU1zUyo88AiAHcbNwY3cTrIV+38b60u9EMgENj1z+8qoQkU8C6RK58A=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc12_1552352728654_0.8166855394739543"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc13":{"name":"@wework/react-floormap","version":"0.0.4-rc13","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"a6cb86b3fc7bee047a5bd990ae1ee32e58fe5e2b","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc13","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-gce8AYdL+LndaOfYnCa/L0Xqh4DezYG6/mvH7UKaL14fVnd2df9OSEYC+ERXA+UVoYNMZ3+pEsLs9HRFHZc9pQ==","shasum":"4b3a20af657c787a10e7f99380ea3ca041065e0f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc13.tgz","fileCount":210,"unpackedSize":1163130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchwrbCRA9TVsSAnZWagAAndsP/iFfbhpUr+7Ek1Pm8use\nxOcEAFcx9Jd1s6N8O0Baunb5zFEYXZaUP27U9neltPVtuV4d3C4AIxlxfpve\nnFfDyPC6tqfSK0tL1ELa0W323P5TjDmgaSbEjH0jzDvKlwqul4PKI8Qg8lke\n0FbARaUJnBGrTHoovG8KdAEeXuKPwRsDwzUTPYvKX0m7KuDuETgX7gQnPcjN\nPfrFMAQc5UXvnFjQ2qunZVUtn50Qh2TfzH4VHf9E3Rn5u1EITwSJ/TexD3SO\nLxzL53Vx3uP+ynJqRxuAslErcSBP32TzDwWujyiLua18NXc44kpQxfC/JUvJ\nHayB8efsNieQ+wNvp+ixepl9bcgtEmJIL/saYKkS6FXOGD++UD7is1ZeeWPP\n7y56PIx7UymGOIo9vW0Hg1tjsXgswZyX8xq9BMaFX05C8HunJGse3dxbRVwq\n6+IM91htqosQTKI0dCrBWF+kBt2oZ6hxOVtRdhAVLecsOfCXZxWvUa9W5Q7+\n8S0Zb6+BmAfaX1IO9uR8ub6V8WtRKy4HGgO+qlpGJVOnSUl/QCGwLK/RvWxk\nt/aZD3Z/mWNoaM1gIjyPbmOIPf9yQoAGDC+2VWdP5mV1Yng56THqEBucB19/\nYInQRpylU/8y53eS8Qwm8YwPrr/BgpvgY8iDl13DQhSS0013+AvQdxO1Vvr1\ntsQB\r\n=eZF4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhYa8DUMNCHvyK2Pg8sAMTFCytgYwQ7ULSQ8cig2ZjJAiEAivg0ryh1GVdj1A5M4yRdZvOl8ApLci8iUc4L5YvaQm0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc13_1552354010856_0.06761621471148294"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc14":{"name":"@wework/react-floormap","version":"0.0.4-rc14","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"dfeaea5f731e2bd239aefeae8e0cd2bb4d7c42d9","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc14","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-2H5k4dE27BYAeyTkA5rMYknOSDYcwqDRkjLOAjmR9NbzW1L3cKsRaCtSThTpK6osXsaoGDtaRG0KtdmGfYeeLw==","shasum":"593ef91eb76e094eb3a09db8e45cc9f0e994d15d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc14.tgz","fileCount":210,"unpackedSize":1163140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchxeYCRA9TVsSAnZWagAAfz8P/0R0974nKJJ8DLJIST3i\n8R1ut3zCi5iW5Jc6fiWyh2Q9yyw3ING9wjS2LNbHqmqVgz7DA57ahmMoR3l8\nqk2sFGaz1J+UZjTERNSZhe7boy3Dl9AWfRL2AgWHdFigHhzhawQfTUeFDY8+\nW9ZQJ9E6dy0szWPS/hJ1tSoZl6dm5g5OXsdONhrWaWa7iEUfILiHNmjQPoXu\ndDeydGon2oml5GUmtpqA2/xkhM+7agOvlk+WtB689K58zwfe1q1hx9Zf7Xh3\n7oIloOkVX6Wh6zxH5hSLJfX+w6JaUxuD9A1Qu2+QoHvxUc0nbp1HTh4MCXL5\n4Ljr5enDVDG9Xsb63OQ4KJ7or9Tc7GaoTkHveXCBTVjqIwc36/vbGAIJa4r1\nUILMfhr0hyq9tn/iroONCcJ+M3akkL+d0gRIDvrLrJcpiK/GLlSQU1aZS899\nX7s3IYA26Sma/yvcz6AXtyPPi2F+7zRRKwbYmQ/vA+2s9h6CbGz05GUcqYuO\nSvz/SSKT2z5mrLk/nVVZtSfa8a6tkTMwgI9rHmktnTSbx7/ICi7xqciEHs6i\nDsoc90H/v1h1rjXBN3Ul08kNaZ0AmDKoiHCMh9ZN9gp2ZfEXn6z1AORa3QJ5\n2R9VNAq5C1bm4sPfry1umKa+vcciZLZIQv24vzqRvcGDGqOk23GnYe3sgIO5\nH3AV\r\n=PNFt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6cFpYrv/wAPN6Qfw6YbtbEgOfFa7LlgbjifhL+wrq8gIgPR3uHpRoTwh02ImwfWpL8gqyPbVMcnNhgJmWnkA5d44="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc14_1552357271688_0.8633170399267829"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc15":{"name":"@wework/react-floormap","version":"0.0.4-rc15","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"72200194cc80193b7275f7697b2ceb377f329bb9","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc15","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-dk2i8Jq4HvgtM3HWrow9whF6KHtbMhrxhBQ9hs1qmgPHAlZcRoJuomH6hATBfkExQFPhXCXZ+mjrIIyQrKhbxA==","shasum":"efef99cc8cac2df5629b947337cdaace5c930f2a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc15.tgz","fileCount":212,"unpackedSize":1170913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciAHACRA9TVsSAnZWagAA1PgP/172lSIITqzlj9WxaT7e\nPBMOBXHFI3cP98sg+gBdfrWay8BXwBQDYy4eSoL/+3oRdgfw098j1yFoClW2\nCAZiLX6UKUmbcNAAKDbCjtYwne4PlNqFZ1xadrB8oxyU2b5npsaA4ZC9noTC\n4aODvWedRkrYaWu517PkG6SN3yZ27FNuH3rDnpPzySk3twI0RQrvBniAmFij\nXddTcizgdSvqnoJruHgCAkGJtcN7KcladgE01ByEsyuU3TF0MdL5Jf99Yayu\nrChEO9jqyC46OY4s3QeZuS/1CfjIWMV0sa0g8sBbTMeKAbpjbvP1f6MlhEMw\nlzuFFioVjhQwDI1yFP250HsaEYRl2jWax0+i5tDEPJlBpiB8vOd3TrQcljlE\nJQETtLYN5saui7d8HnsN7dNPD9d7lcz8IubMRfY/WWq5h5LGvkCWMFoaXrT0\nmp1NsbqOFVFQ0+9i4HQPJ1tWLB9jkQeMMoVoH/iGQU5ZV1IGoQyjPftHMRW2\nHMrVvw5xrJhtB+DPa6RvLF7hutO9MNJoxSIrtQIXEHJV9R3ac4F3FUFL8X8C\nOGQMliLwjr5sIk3G0XEs1E0RcXEjH4+6l3eL05RycA9rxq8Hpx7S1v5cyNTc\nGjz19o8gOaAWl2kpLozECbqtiQwZCA2qq2hBIOsA+fKT2Q7lljViclHpAkpp\nyLlP\r\n=gdOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH5lOMuKDPzHBc3pn2tBOGV6h/W+Wolq55wMer40pTmQIgdq37eDR3Hgb4JDSVXgiikZsygLIfkPhCeHZs0kulMt4="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc15_1552417215674_0.0632820466186077"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc16":{"name":"@wework/react-floormap","version":"0.0.4-rc16","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"5e8fae8f677ac21b41427823d98c40e38be56bfa","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc16","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-wMkoFiS3eCdxqapjjvyWfBJkcH/kgnEqGdxMtzD5DOBcBWmALIi/BkgbX0h2qg34uBaOrk2VwJH2e3v3z26Cig==","shasum":"bcffd743c1fc980790fa32381c4aaaccf3f519c9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc16.tgz","fileCount":212,"unpackedSize":1170913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciAWaCRA9TVsSAnZWagAAA6IQAIAi5jZKOq/gRV5lE0Xe\nwX9bA/z883FTxtLKnj+FfEgxqSlLhzimSQSpgWOSKhhcKOF2lTcvqw4fA++2\nvCU7g1gBgQhNSIgbm9+8GWmiM0dqn3H+GRLNLE7B+CrVtmrsi1YSWsS62bP7\noMEWaw7mqEVyU/vrSH3VSuZYXQ4QYvd31oLu0oSMEmh1YtLZ6q/kNs6HT+vg\nBXSczgdOt9N4FOblyX3n/r5eS6REzj8+NykVxCf+aRPBW+E+GWBkVuw6mHG7\nUDTI+oDshlC92quXol92mlmDaG6+6oYNKiCQAGmw3sY9SGfXHn7QI+U8HwrT\n2ZbqtyFSE4chdKRoIh6kKNBvCTlJJ1cGJzFb4l2dC/yRzz1U28AjZphxOfKi\nB1PBPuhEf+F6ZiOQKouPxwCIxKJhITLtCjmUtnOL5XVgyi+imZkzlOz+kLf6\nKyXVCXd36EcBO57BFQONXvz9uACe2r4ffPCR1P4KwjSPg2OVnpTNMfyADei7\nhWaYmb5cDoBx/FNPYOMPOao2aTDilIpEinvyXbvVy9AtPGYryp5T4WCCOXFr\njZzp0lUsak/fz8I7PtzkuxyKtOSADpXGxlzzOSsNSZS2C+dVKdIwJnixPibE\nJ+zEZJ6THbCWH33TIKQ8BmF9W0CY5Q/uVUadBYdunQJO1uVoboD1pzW0iX6q\nSc2s\r\n=MZJG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5wh0uZIYuCQbsOhjNr4td9vDYOSHBOg8Z7BPuG1KatgIhALf0MamIH+yi2DhJdTe0cZEiH1cZgVAw6yytrJdjnQAB"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc16_1552418202213_0.6416129894104359"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc17":{"name":"@wework/react-floormap","version":"0.0.4-rc17","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"6956f363692c0f194934ae874b3b564dba0c9ddc","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc17","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-vJ4vNA/wAdahzRrt9IFh3JFNZGUVCzQtg7ExYfXiUUV/IHC/YryGotso+KNf9FTFlH+u2/fDka69FMjDq+kgjw==","shasum":"90279c3c487f3c9f35cd313c1ce4b6091128c769","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc17.tgz","fileCount":212,"unpackedSize":1171109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciDInCRA9TVsSAnZWagAA8qMQAIU4ZBvX+V19kk+Mwr9E\neW0RaTFxsbKqFDeIIO5wo3BWGpvdO2kQq0g9BqLfrM85dsJmUQwc64lSA5Dg\nWS4moc5PR6GHdOZZlUXXsyH6KBiIV1IxW9HviBblMR8ruzjpYG2mf+GgtiUj\nmJtZMdw7lsGQMfYz+LmhHRBC7qjPIb0aMRpSsPJE0At643LkGyOSarfqObuF\n44dJd99FujTcGsQfRRdgtn36k4KIxXmaYuaB1jrpOAvIHyFTt64vRsJQDjbp\nF9zQbHNg6G5q8wC5lnpnAH86wuixp/zEDNLCQY4nlS/Itr9HEKyo8ayVuo2r\n0TX8AanofYIZAgBLOlgcusoVoLlwXQ8WvhMxiMr+DTaXCjnxKR3lIjLGqS8y\nMA14L7dhiBW/LPhGdzEmrvRJGcc4iEJwn0HjYH8ilV7SGiPyytVbCO/LvKP9\nCmvKV9zuaybyFc63ObS6aGq8Rl7TvBcrH0Y0Ipi9c/0xq0WrDsa5RNcfMcz3\nNF6ShTY78FZ+I3pA6JrPwMJ9BD8iCWhDx1nb5DSd6CtsGJSCm32WaG6lfl8O\nRkGMmyO/w+BAlJDdZF6tge72XTAGcT3aOU1QL86ZXzRVhJffD1Go5SjKXNkU\nwuYAtPmLB1fniAzHR4vPbTrzkcc2TT39g7EEFkietgbtqROtVowXZwfyoZGZ\nvR4I\r\n=GKF6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmEeorgsg29MoPGaMyUXp3KiFv722SXodvpu4EINZd9QIhAKfH1Aun1v6fStzz1x+8CuH/DQaOrXBG4Vr9WBgqfZ4Q"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc17_1552429606581_0.6841607091377839"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc18":{"name":"@wework/react-floormap","version":"0.0.4-rc18","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"React components to create floormap\n\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```","readmeFilename":"README.md","gitHead":"35aa37967e85cb33c5b78a3b0001ad51da8e3dba","description":"React components to create floormap","_id":"@wework/react-floormap@0.0.4-rc18","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-iYsbt9gf7k7l5WpteKsdef9sjNNs6UtDT1c5BmhCZbv294n1wVZVzvRHsVeftAQrW7vA40trcwjEZg7rz1XHSg==","shasum":"afb4f75b23c129deb8545e3d404b4908c10d9aec","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc18.tgz","fileCount":212,"unpackedSize":1172689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciGOMCRA9TVsSAnZWagAAwSIP/1gfxXLuezEETmuAe3z5\n0nzAHOoxyJlFYCFWS6wSQo6nZ2jJ6sUTnEUjKrW4vLzFWIowUNSwREW4WJFM\nhFjNza2wSuo0fNyaX63k9aZetd4wpzY6wEJwwJl45cSoUc9qBygdM64Ul5eP\n/66ymQYO6WBUx8upatnd0mO25n/Sa33Bs5C+LOItK/f1oJT3xL4tvX7dKfcM\njy8Lxz+6uUCJNT8Qhli8iaG2MHoIDYr7nOf+lu3U16KKE2i51EXc5TNL+HFh\nRZi8ZT5T/ApGQM/qQCdKXQyerVGluvWN66L1tpuAv36JxaT2knB+vQyd/cVL\nQwaXYy3n4vSzzem5TUTBGuZUxKgpsD2dtO6Zb2EhvKEKba2Ij+mDW8j3GWfg\nEnbaxczWiZDZBEVGIa671UbUjY/GNIOmXdt2oxHDUP78RvtkVIitBQ3AFL/S\nFqL+lEY7bLRAyaIHzvy9tYs1VfOOyMi7B1e/5a+tx1FIn5pH4IvLOzdDMnuM\nswUbUfA6FhmBmQKH38IItAVxp9ZuiGQPfAHAUiFD7VzfYl2u5RjUsV72Wg3w\nfG496jf0exxSn1SwF/kIEccHwnJzpM7RxCaJQqjs4mOF25xlnLfOQFotNs0L\nF5jrJQK4Up416g55sT41uiS28kQkERNqWAtQxkh5SBq4JNmpdWCFA70dNNGE\nTmc3\r\n=3QjK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6czc+N9OJRo5rnjTRpjbJGhcgdwaEZZxRegMZnzhxNAiAY4AvVgKalahz9d21Pld674BwCq0NS7sJkAwhGLICgqw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc18_1552442251344_0.19975964732474427"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc19":{"name":"@wework/react-floormap","version":"0.0.4-rc19","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"77b4440d89887402efe89e2b75b93741e9ab6069","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc19","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-ieXER6xELoXSXyv34RDHDRvy+SQq7NRO/P5+zLRvm9zYT6WxTJluFJHX0HZTpH+8kw6wpHpfS1pHbtJ+n3D2Ww==","shasum":"bd0b94ebb038e809cbec5bf80b5c3d6b07fadc8d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc19.tgz","fileCount":212,"unpackedSize":1181591,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcifIOCRA9TVsSAnZWagAA55sP/A25zx804rrUb7YRxhQq\nu6urC4Fp6iq4q+rc6ClYBDlVgzAGRatBDzeAqjLhdoAAh9CAZESfw+kmHk3q\n7wh88WBjas38IXGKMWEGtJBtlRkhLjFXNDntJLq5y7N3LBqXoOlA4zRnaC4F\nGlmeyzvE3NIWlQMInOOXqQnscwAMQvWTlWNKDJYRplbGhbsHQpqNi7oF2Q97\nWtlik8btG+LxUpAze/WGMn6bO4iXNWFtrhKmGKS62NjnNhiEOtEy1I5Jaq8J\nUz1U8Tt5tHIfkMVVZD0TqQfgfux0jtcZl3Htu8nGVwfGW/uorDpUidfy66Jd\nELAlP9eSr7jyCpaD0CeDNUnPwYi8m86t/5qRujV2w01Rk7FsNGI4fqw2mCd4\nB20kMejMAD9KZYZCFd+wB54YUkiducwzYA2ILvq6pz0/xmli4i80k8DazbHG\n9Lf4bxPpmTtbsDYKBYGZ2TjMdqBZ42zE5sYIr4kdxYhRxhbq41RJaWqHjOZO\nufGQtiSDSNxv1qsORmE3wkjOQEt02T5kTdi/t8zz4TP2UThMdGFZ5uv3Ct+N\njM/BY+6NfgwvZB7IGV8IaSIsF6stA+anf7z0a2j/9Nik1j2hsPXTfZyVL5n3\nX3M+BM1R6DcSIk6AgOQ8pamUTYG5k9o/F/P02awpFz6iAO1/lq04zZceyzqW\nQulT\r\n=4WZ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyT9kFc6fTUcYKco/FnO17SXt2/LmlYDQKp8NP5pNVSAIhAIMsUzuQFoWz7K6t8GCQAxyOLmIiuwpYKRxHUscNs19V"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc19_1552544269753_0.5743106615355389"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc20":{"name":"@wework/react-floormap","version":"0.0.4-rc20","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"bc1a2d5e520cfb2fb5f9ccd77f60817dc7c4bfef","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc20","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-EmH+uHr4gbGyc5e37cF3/rIfhzchbYE5xUD8v2skoLrcCJJxHuZfkwa+tHMJt6DFGJxCrRvGV4WaYKUB3Nj1pg==","shasum":"8312ddda9d927d59976e34ed891dd674fc51d6c3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc20.tgz","fileCount":212,"unpackedSize":1181714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcifUGCRA9TVsSAnZWagAAcjUP/3o0MeluQOCQMqdFBFZy\npt719BWXYFBt8iZA/e1aNA9OFSFKHFzjodkKyhypaveM2kaG4JPIh4AnSiDS\nPnKIRqrqP64Ome8ZDywb/6AXpeFR5A+uDebTl0oBQI8TwFf60K19iXorB3i8\nLAEQ7Ibcuzj3GGcdXyLfpR5e5hPpz8Mx75EzQYRi6qE+K5/1tJv0R6mM4QAj\nPLU+mjE/0tZsygJXR3W8S17in3RPN+Qy9tWiwyhkwkIvpIDScMOqTkv93ylZ\nXsyVF1KaXxIGXqIjhnXc4+RpUslEKpAipFTWJvWsFo8Pl1bon9+N8y3CANg0\nyh4mHVzMyy+Y4uSPuCsqFDV6JGzC+0CrI0XpSLoq5qM9IJAl2+lAGKjK4LVQ\ncjZ2DIW6xBauVFVuRZEGU+uOBkSgRuVUCGP34IlAjaomhWmagWWp8IghV+lF\nTUFQVfwaaxrP1Nsb1pKRd4+ZiQxhjqP+2cuj9XdKWQ70bnFR66SgomBNa1Ld\nEemQXQ1UptS1hsJBGc+j2hzmtYttdwFJ3ictoiY2jxHsmof622P7N7RTi3qt\nbCXvkWHPnrHAH8SNPsLVFZ3U37tSXB+s8tRhFAKxwAiBu28HbJyEbgsEjYq3\nwO4AfAq8xg9MuGwPSNFTA34A+94pIlfMhnYCmRkL8T5hrEAYWjKh3WPI5eNZ\nB5Z2\r\n=LxsO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG8Dd0RFRbhXtSmA0/w1ZM82U0cM42+Sp3WJHvkCStsAIhAPPIydh84j+hqUYyOMU4x0jw2NtJo03y72POh+ZVFWpt"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc20_1552545029918_0.7208128455507663"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc21":{"name":"@wework/react-floormap","version":"0.0.4-rc21","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"2d80fb7cbe71ee290cb9786a828904b4568b0633","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc21","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-9EM1Cd2RZ17HmVCMuhkr97ZrAo++D1iu9JlVMD3kovRJTLYTt87br2WUMQtRWitoAsF6EKrz+ksDsZownDau/g==","shasum":"ab67e37e675b793c881d9fde71291e2eeb179d7d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc21.tgz","fileCount":212,"unpackedSize":1181818,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcioBECRA9TVsSAnZWagAAN2YP/0RtLaaHATJX6qCrth+t\nav0RPGKFxI8ynHPZ14lhHed4vbPamb0aTnnaCoBjku3H41YkCH9M2amCFDLp\n3In6ODcpyMmmEZTTbf4Ns+5tEZhuKUQXm2UucJ/G/+d/5dToarpI8sil9rPv\nDlVCIPmfbGmPaBgRUsECNzDrrwIDH+4MXTWQyK/BOub7ueiXPOzOUkeybtwu\nLQxnmGmOEtYECpZJsrF63mgAWKz1sjSW8bIkjyTVTyRm3eN4/CvYR8F8atwA\nBy3olJdD1uCRC5IG2/d03JtiUZ7wb3a/xIqL3aNXAmWxzFYy+1tJ45I0RXSk\nzO0jRmsTLK8eRj6PSpDvkZwdoC7zw/64uODFuWKldmRDvMWUuLOuWgoU8nup\nxjzgIYL6y9EDSrq9hfRtqVLa61jAaQEvyhc6VmqpbVec0ZA5PPra7fVdDn35\ngc3e4e1v5GnD23kuoA7KUhpt9WhlqDHHEaMAIFR+5s0ZzrMTt4+e35NlLwi7\ncGOhVjmCdAj4kC8RncgIVght0f4cq2RSPA0XdcgUWRrigJlSBWkc7n0aM+Fv\nMOBn9ciF+EtgBlFNwibN4dnzRLuvRISzop6cFxkEDL1As0/I7U6DxE9Pyhex\neBXFdqM0o796rT5kGPzigmJH8+LCfRWydW3zNI9908mvFGQViyjtbCEQ9OPI\nPhkK\r\n=Vdag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4/e+D5zknWgsoh4w1LXQ7Dytg+kpuXn35OClBN17MvQIhAImnjDcE4y0/VW/hw5IpYP0Wii7ZbVy+SQE5NN5Itm61"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc21_1552580676011_0.42603718217601716"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc22":{"name":"@wework/react-floormap","version":"0.0.4-rc22","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"6b2355e80d80a030ceccbe1e8ca7479e1e4b3380","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc22","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-M9IVfXoxrv8aSPAkHBGA3zlN+q0dO+qzUxyR9apSLr/leo7cisUYnHtKkjyC4dzrIwfWeAr7bl30nrwnynl0wA==","shasum":"0dc796d29a5d468606dffb478ce3bf1599d28308","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc22.tgz","fileCount":212,"unpackedSize":1181568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcio62CRA9TVsSAnZWagAAJVYP/iQ2a6arHVTct79wOk4f\ngTB08EiL3JA2UVtgUSOZIwi1QH0y/2tM/W4JhmBoCOmmwB18wNyr7+4M/Ash\n5k16G/SCAaGoCQUT1PUucreZ/21Yldd2xES1Z1XSDh5rRDKPlboC7ytUmbqM\neodb8wcx4KdDo7IMlEzQYlcovwuCbrH/1RLWBN/R2WO8qDpLkpvhbqhMEUjF\nK/G9YuanM/QZuwiZuH4JAOcpdY6ywIZlPOdgrZq3rSm25MZhy3ukmkxwCxeR\n7b8tTD9QgGEpK42Lm07f8PYu35Pvdc71rkxiWj6lZ4L9n8N+Cg2nI+qbytEB\nlGlldPd7uDXUThds7UEm/1doMeQMbEtbRmn67qqCtqN1bE5e4XYGlzZkuHWz\nDF39xoJ48jIUljnMUyommL9wTXMzht8AtB4YGiOZfehCdN9ix/yg/s9W92do\n1nuou5UgjESxZXoLgctJc6T/MYFYcsKFodk6a4YPOKNJ2o2IeCj6CFsvD1Ha\nWBqDrI4MuBsbHN7g6DzlrOe7bLTrvfRqbd3BwmfGTzAaGGbJNmleL2mpt9ZH\nZNYP3I8jqgqRO+lL34P0s5uC+BAmYX+/t8KXbAdvLUy+jlFLPOlZtO4/Nc/3\no8iMy6GBDKtCOa3HnYPWgizw2r2YLyE2ZYENb9MPq3HuRcc3TWUWmki/hy9K\nTxWn\r\n=Yk/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHyK4Dqsiowo9L6QA/89HfqTLcKd+ZPJPG4qwO/7px5DAiBhfu0LOO72HWFWRRctALUVzhrizWJmitfHuNRCDmzIvg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc22_1552584373413_0.7013645448551322"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc23":{"name":"@wework/react-floormap","version":"0.0.4-rc23","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"713da785d970551951c6bd8a3d75be02f660fb52","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc23","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-r7QiM5Hj888sWcAww7NUol5KN1+HHRbX7AyHT9kwXB4AItb3ZCo8DKV7BnB3pOCoWzPvteoqn6WQ/F4HNc6zSQ==","shasum":"0234edbe25c5e163ba18d2026bbe1e23195c1936","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc23.tgz","fileCount":212,"unpackedSize":1181790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcipAjCRA9TVsSAnZWagAAjKUP/0GrUhBb6wwL2xL1AjOt\nXbYvSG7UU6EJdOCs9Xyf8yLw31WqTXA491fveDWfQXKclX9J2cZ3J22kyH1j\noyLGFNtm43YIrCfaL9yRqTMP6Z37BhjpsVNNHdMa2TK9wJOpF7tp9OeaLlwE\nrgOMXKkRhB3zIP1V6AOes1FriMPRbfuVQug7EofZhfnkgXBCl0aWG41vamOK\nphoSe6F2KDynSj61sd1kqJL87v7P0AEdJMvEzIcaYqpAobXJ36k9aVYsSRMt\nWpgPdg1jKDGvZwBr+YsOpKdHhQOXcM0WiLLVrtPbOD9rven3mq585XZxS/e0\nt3L7Krh0WkdnWtpRHoX4IP8MItepsdTglx+nPIYwy+uKkRJG8mMVBT2iyWj5\nqSEkPIXmZFRvyfPGLbfnds87R2q47+hlEkpHOhTb2vh/ugwKQvRUN+i3Sj0a\nPmP0t3T/Am4mETL5dZV1ESkm0ohhIL0x5My4ZGlhRbzg1xUJDgi56PzSpqfW\ny6/mA0aEC7ULY4r2dM0HBpNQhNNlSUN0RHIxw/LGNk9/yLpwL0XQGz0aOCv9\niWlDsq8XgMb3W2oe7m4NFQn5Jlt014hFc3lbBjFY9wX5zf4QKap0tNrv4mj5\nTuoTQmMntKpRrrlMNu38BJcvydCcosVVVo6WBrkRLHj7mgoOzXHa1qzOWOqe\nf/Td\r\n=kfEm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtte2ajl+8KH/iUCBKzp9j0qyt9HRrIMWnMO5ApZwvqwIgJXuKSG8+uUasoKiMuoGQfRMvxhlpbVk3OntHTnZJl64="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc23_1552584739044_0.9414252865858195"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc26":{"name":"@wework/react-floormap","version":"0.0.4-rc26","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc9","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"ca0305b14b4420114ed99d30ab818d13ab6ff959","readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc26","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-aZVPWO0+BGlsB5K4l+l0gnKYimX+PHCShZaaUN66zkdxnNEKEE57LyGXkK5Z8RLMBuMYn5yNkrZ9VIxrHX91lA==","shasum":"7a2db08405e722c80b4de52950ad58654f95a5b4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc26.tgz","fileCount":212,"unpackedSize":1182444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcisCjCRA9TVsSAnZWagAAQMUP/0Jr8TXwQEjTCM24kj5Q\nNLfbEgda+pEP29+i8aYKH0bm9q9uFsNqxNwl2q7E4gKlSh9ivogfik1Krjuu\npZBeGucrzTFEiyQrFS9Qzf4phjeWgbxGUlDQOMpP0ThjQzBH8BINF6Al+POE\nKo0qXxLJixqs0mBFWX6R2PyISai8fi8AvnyDdU42w+P73tRJoOgz0LNUkXxb\n/23eh6lYogWm7f0A031jUXjxKXMOmzQmP503TW/BZcNmz8qSaiu+vGf+DAxg\nTM44ApjyObw7z/hXc8QD4Mf79jT33F5eA4/AdFj0MEH6vHI80s3NJj/AvwAu\nhekeQnuwGdNVAmT057XavOi/Y4yoAIDiAKZSFPiPvfy2nnI/Ll8Gyh6I+zTm\nlhTF7zXcQu+uYB4TXnDgoKx3Vj8aqLGJVBJ7VI1dcXRqDngV2vzT6VRp/xF+\nLcLH22H+H8IqxfR+JO7otFdlM1pvMYDWxSbPEBxeupNgNV1Pi0Bcvcp/uT4u\nog2hVnd9t6Up8d8tSyZtV3CMKUseYgOHxkLIRnvUTMAOCl4z8w05wn0NewYA\nabnHplKzX0Knb+sEU3Iv7FfiFuDlLC4D3qogXXS0OpO/fazIdgTvdQ+HHkTN\n6DTj2r59Mz4ZuO29ReRMtv75hL5eDwTg4Lur29Hf/bu1uY7WbOG1kUZqY6Es\nR+9Z\r\n=JYld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF2/w8wTLr6CGzlYx/7bUrhrLZOZWyUPxa0r5VjbNWnwIhAP7KXyNx0dBqHhwVV9ni0DdDL2Ef00Jsx3oxg6h8/Yc8"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc26_1552597154487_0.44255542151930816"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc27":{"name":"@wework/react-floormap","version":"0.0.4-rc27","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc9","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"34d3e0fa923808043e262c30fba1e9b9e4775d7c","readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc27","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-l4G3YBzIwyFab5/X5Swsau/FCcuDoNad6B6YfsWq3DK7YhXpGh2A7lsGIhplNuwfnz7RXNH/BqE6j/Sn5Xko8Q==","shasum":"189107d1d32d17197f3a4157c3967b5e5223558b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc27.tgz","fileCount":212,"unpackedSize":1182612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcisQvCRA9TVsSAnZWagAAwWAQAIHLkAa/ibYVucVIAA7d\ngNAKgE9kC+/zSXyoB5Z0kuqwfwgmBAsGn+5Bk4kWelLbuU2iDHUGhe/BSx5p\naL14yHUT8OLAGUVRH6NweuYOlhjjYj0c2q7J96NUCHNHV8xf2PDW67sIUjBl\nVvY9DZC2/dTPd7TNeAFlv3e0DNE/PKEs79qvKDsHFIR+nbne87KHvweHDo/V\n/SzFdtCjg3Ny3pUku21NVCjSgeF182Prj97JV/1SmroCO3fIW+hW5vylRwSc\nvrqoraFds0SvlSsOwG/a82lbVJYqWgGUks/9Ryn1kYR6sHS3pCKp0lL9k9oM\nywOkXV5N7kCHdq1fLFzMG3rzmELtZj74F3+vH8TazSmvbTUd7b5Zm+eIRFYY\nBvdXIfOcYCY+sJH2HRBV4E/lOkIcODzLTMvW4wn/EdRbUtREP6ZAwUn++m18\nhxQOvQAQ4Mmw/RRfo2g0vXyhzKQZ0BxdT9X89nhLSRmPm7QzVRo/B+rpYIzl\nqFKMiGMCw8VyavB85cMFFGFYZNaEJWKGSLskguc7HADC22h/Eeoej7fjnmiN\nfb+dcx4URd7gxv+05WhdUunvXx02jKpvPMHYsvAnd4/fv0tdQwvzZDqxdyKw\n9HrV9W0KWuBRnqM6iakQHKlELObu3l+Q8ewcFXKEMyOwpa0LBnQvZfl930Ib\n+Q6V\r\n=zw/x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzUady5VqU7xp58cuZS5LDpWt/D+Ll3tguCSsHRB20PgIhAN4YrrtlL53J2GKgaqoIf55NhEZq5uaxpYQQSo+7IXqu"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc27_1552598062906_0.2809636515343168"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc29":{"name":"@wework/react-floormap","version":"0.0.4-rc29","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc9","@wework/floormap-utils":"0.9.5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"c88bcefb7c0ac16103942d42419176879d8a0374","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc29","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-N2xSpvHIpqfPwG5yrlZZ/TfziWzAbbdArR6eEe3BAQlKYysfzdCEEHBMCXRu1Vi0DfZaJwUpXn52MOoFNrQEag==","shasum":"452d07a035b9d5bb088623dc6d307fe9d8c3fa98","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc29.tgz","fileCount":212,"unpackedSize":1182651,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciuPoCRA9TVsSAnZWagAAyqQP/28eVBaA0FojM7R6Pqh4\n6/Ul31+3hraQnkGbeQKQ0HdMSVPb1d1XkhSwfHOZBJY1i6otskwsGJAuksqr\n+aXrHDVsoAKOci1vKk19KaOp3iJd9K7YBLQE5CXarIjj7dnLBL9WF4fa5Osy\nEw1Hu0W6L09zSniAsaF5AVMPInyosX//dIVjU64aGdNUVMzKUkk4oQesKphL\nIyZjyTMj7LMJcWg0PEOQovPZbnSGDObvT6cQbKCBqkJssVdBNXLRIw/+rKWV\ngW1i0RHZYz/TFTT0hHQ/EdXME3zV36l7NvxJeaH+ZTXtSy3v1Ckv0dAHkI9s\nn6+BSi7XdaddEss/NrUB+PbjVKRMkgT6JE0xj7pD8vPe3oJBMpBU+oaE6bRx\n9DjfwMksHYuTFsxTN0euidPhM9VJIM2t23lUcTFMuvKtM9EMqgcvrmBiuTPS\n5BKvhka8f0rcQD/ozfyiUUJfId4gQQLoW1BAf+lz2Um1uIiNNQbEpblQBGOL\n1BPEqqMjlOI2sS2jTOr1H+GGzEoVvEsrBXc1SCQnaOMVHUz/W/tbqcCWOZyW\ncQPThhi/MI06zLD5TZwgc3UmHaY/gSIj1zElMYPIGSVhfiJd1fJuCYm2tLB4\nSS5l+sbf07FuuYlSiFohJuqxBtnM8FRh0k2FF7r9ARgI9dF689VXzDl31xHH\niEkj\r\n=1SZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECtoLU/Xx4RMBOJGuKnBGzaeT62ywXquAkTeyUCK6nwAiEA2koFhC/tvN9whkSdRXXBehXkWS5YA4XoQjSCZ6Gpf5k="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc29_1552606184085_0.9979191893495363"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc30":{"name":"@wework/react-floormap","version":"0.0.4-rc30","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc10","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"8cd1d56400cc5b285373d99e4a0cf7479aa69306","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc30","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-PGYtsziM9uvRapVD3X0Bz5GW5VMJzmgZtFHXyoGoPSDQv1W/gczDCoJLDqMqqNuYsFITka5WeyQqbMSIc9Eg4Q==","shasum":"20b986efb44d108733e213ee4c856adedc396b23","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc30.tgz","fileCount":212,"unpackedSize":1182613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciubCCRA9TVsSAnZWagAATiMP/A2KhZrzI0jLF2MIsH4p\np6Q0beEWnpF+j6HB5E9DtapmmyH/+0lR17jDwCniugILlo6DpX+k4CV9am2I\nIPvGclOt8RmvCrDvXo48MvuFGmGIY7Gd8bUPT7DEp1B+zP2RjfUQKCHhcFCY\nWGSmL5hlo/w0dUHvIpswQlxJqk77LNhoo1tpuedIdS4o9QdUkJeOyF48D8eg\nem94mrPTm6n7MPHnCXJQUv/VCJ0G7LwJF0hNGqc2Z0+lyLW9vmzZVEFNyc+/\nSlN3GyeC2R54Iyhv4XqlwJNN1jkCX9hKvRog0cqqs31pCTXtyzKNJULUkmyl\n211hV+eIBWA9aEc0g0SmBWBAxsCoe+cqvH3S80ZyKby/I2S8oVVYwTRah+dg\n5PDGK/UruFIN2BViH6ekc1EyspKaFU+VCOZfDSaD5YP+a8ym49HcwpUUJ8Wr\nEwdEcZXW7xE+15zHgC6dtKGfNeTzsl0vZfhcmYXcNHOSGWWPBgfCQ1qHcZgc\ncZWAK1mGhRqOeobP9lh8h/oJrNFdnsQTtUy2w2MVxZvKFGbc2WKTObb6E3mA\nqcAjLVvhGGThO2hKjb8rUo22uv8G5WASAl02YuFNMk/3qVo9RarI6HBQqDR8\nAZnERymtPDORogzWo4YmXyTu/D6U6yc7EZezbyYd1ZQ0SjPpA4CPWT+6p2gI\niZoO\r\n=H5nP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIYLUnE2LEIfaR42cvOwz+n3ooqagOzgtxEFfVKwaMYAIhAJCey5q6hQIDrY+8mquVBVLGWeogvhqYjsLda3sgj78I"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc30_1552606914109_0.6177815621731604"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc31":{"name":"@wework/react-floormap","version":"0.0.4-rc31","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.1-rc10","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n> Documentation is still in progress!\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"865fbddb3b8e9b98aa6d808f31f396f6d4d1ef3d","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc31","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-DUEBlwNEEPbLA5lPvTFghv2TfMVq2R2bObcOx7tFG4Zz+S57nKTcOVlLMcQMAba5Scq2sJR/j7lyV8XS8qKzFg==","shasum":"77ed81e1e269ea6bcde2af510465e2c6295aa32d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc31.tgz","fileCount":212,"unpackedSize":1182797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciu0rCRA9TVsSAnZWagAAS6cP/RQJ+rCZbm0UvETAD1J3\nlVibQXZT1p9iy+mZlE+k3fePuUTci+qUsoW88VUai7YpiwhUYlQKI4IdSqvj\nYXPk1IJCVU3Z3XhQ2fxZaCZgEgw+6D9cMwGb/2BrPGtt7YSVDDMT3wBAef1j\nlWavTGGMESo0wHOAXSlfsI+6jrbI9NvXB+8XLAY5LhyQ3DXT/dwPf6CnfI41\nsj8+hu92tMFKTc1aQMIXD361i5R0YKcrOLW0p/Cz4QfX7trSEQa1SF/YeDpW\nHwLWasajxH0iRtqV6Utd/hkUX6OBC79KT4QsaAPiX1Sv9/IJ1wfdNoplldcH\nnj9YjbHb49jwne40C5Dj3AfjHIoUhnzolLuT8YuoPUW6I7Jg0zpQZwJFJTHS\nzDym/Il7PAEWscB4hnlbdlLDb6Pt4ISIqStNoYmXW6pTi3uys4WrDF7QDrgd\nlDYE5TJjRYv12abCqN4rOmzQPITxU0bGnErFTTCsA8/JnsYe+UAG12VP5M0v\n2kg2jfdFPbeis7HjSEFsQtuBe5HSau/y1+OjSFVKWSmcHRok17nyvSUY6Pvm\nW70jCLq6RpQQ8VrZVJpTAkNjPQ45AEQDe6t/fone01ShJXaqNXpFnP7njx3X\nRw7PfsCW8U679po3JRropQsQpmBgesrHfYDEf3Wxzk3QV4awMXhgxMJclcfN\nvt2L\r\n=gnK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyz2REfikdkyINsbEnqFfscMk0KsFdc34IePT/anTVSAiEAvlnIAknpsrv/SbS+25unDtqMhCQkQ56nA9F0I+QZf50="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc31_1552608554870_0.4424282924063063"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.4-rc32":{"name":"@wework/react-floormap","version":"0.0.4-rc32","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1-rc6","@wework/floormap-sdk":"1.1.3-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"faf0bc57e504561ff5e6d4021e9bab039cdee044","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@0.0.4-rc32","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-F3aDEmeZZMOQntCP2bmUt7fKJ7l89cpkUUHbZX2CBFEGABeJhCt8zXHykuzT4QGCP1xfNzy1XGcA48aiurYXeA==","shasum":"98e531a12fede45b1d86613ed88bf31293d6bb3b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-0.0.4-rc32.tgz","fileCount":212,"unpackedSize":1182796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcivNyCRA9TVsSAnZWagAApfIP/09yFRyCX8kWJy5FSnSU\nnf9MBhieZAa89B8iIXTDGYhU1O+BtjnsbzLPoLAZ/Bpu0VbWORW6b6FV+dbe\nlQ/x294a9t0RYtiVDDszcSieGi0xlnPIbJAgnq5vLMzcldQkrseSiVfPOjV2\nX5t5YPjYfHPQ6ld/TMvz4EI1BcwBJ900aKLkZBkD/41O/CKlfMiK8D4ZAEva\nHCcSltQ7SGBkcYmX2XE0Oe6+R4LYHjRpAxhsu84ypXuYgVICmQ4Jj5/FVpaX\nsyY3m0ilrPRcZffEk90oHr23J9aEtdhltBzko+9/In5VPHOb6VeDougIiSC/\nRCba6y5rrmQyQpHV4I5Bji6CbiMeu80qE7hJXfiCPUipN247c8s7zDO9hija\nyTXcxtGVjIUzP3flHNletWe8MsaFFCfZPkbZsf5W97y0BELIBUDsxsyGoS8/\npbqxINwNd4/qjgAOb2C259wD4YTJJZUUp+PRslfdPDEdAmlwI0RxTSBIzH+L\nAyqEAXs5dXkO56m6qom0ei2JTBpykxrT9V3H8phLyU5nstLhgCoI7AXIh9LT\n4E4NumFlAvRU8Dk4zmQ1ENv/NRHHVdEs5PjP3gTiYtPcwN1KFXwzKWuvLH6t\nFLAFWWO+xO9uDw0atzlKwx+gJiI3WxAKFNoTTOen3nA2h/u5jKC6QYA+yz4P\n3p2U\r\n=C3O/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNXSz6YoPJs9JZuQP3rEP9b04CmhAuQKxsvO44mJqw/AIgGGOtgvRvKm+OcBIsRdbU75hfydM93O+bMXCjBStX2Hg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_0.0.4-rc32_1552610161029_0.4419240066776433"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0":{"name":"@wework/react-floormap","version":"1.0.0","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1","@wework/floormap-sdk":"1.1.3","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"0aeed9d9d99e6dc6f4e8f43363ec911e6483de67","description":"> Documentation is still in progress!","_id":"@wework/react-floormap@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-i2fH3Cnz+yUlJydT3AUFiaiXhEkSzwc4QXpt9MKL/d0U3+ST7vmi1EweF/vxrHepnJyhqkWQ3UFB7vdhuUjYNA==","shasum":"4ab35f537b72571adb8a07dcb16bebde9117f02d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.0.tgz","fileCount":212,"unpackedSize":1182783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcivUhCRA9TVsSAnZWagAA3fUP/3g/pZvg6UUSuclJ+I1Z\nTSfk4U4/Wt9z4shbqZe1bPOTFg9WXxJW2J7QuZrgVSXMlDyHuuCDtclQhW9f\nO002vsJPabe7KdTyB0gBtrzx+nRaE6BjukZMNmLvXh784KclPcWYNPjb1poo\nwIvpupQYtWOaG/COPunt755qQPXmk/iVxnjUH5AE5KoKjYmGkRt86tf8XKKE\n3aiKd3xM83e5hZb9/biEyNA+Id+ylDj0OUvfXMWYOP7vn2KxaM8HwONop3hq\nRALgynOvWbjX4Bu2RbEmrvfHGUFknO3o/ytXP4zNTwULCnRewo2EDqHppHAK\nsWrUbjL/F6GSb+VyMt3xhh74mwVl6SwTyYklFxij5fffdAJV7bbo6Mk4H4TV\nFHRSslpIIA1F/nmOjDv3Lgt2X78N+uAxfKMOVywLQWfAMjmNiA5KftgsaSKK\n20pF7MuqpGcz7/SgC74oUKkJGsCv2MEIUPL5DN5oamCWU0KW0OgmMopFhl4G\nVlsKm84oiGJwsjotqMyUD9JeCNAm31zuRON5bU5MOHa46x7qxGHmxkGuXV6L\nNHpl1zMyGScIYUnDT2qZCvF3MtzE/PWroIL/cLgN+SBhrxhM1xhsVPq/0k1y\nR2GTeKfw3f+Woaa1X17tKZ2rgoF8uwu72FV6lwag2rg87B9hhnJt6gqeXxk0\nvgmP\r\n=mb+x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGw8n6dC5UYzHsITKksdi0OvlAWdKAywbViVj4KLg+T+AiBZON4es0b0AHTPZYHLjfaS2gkQswJ4aevCFX+mfRMMPA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.0_1552610593103_0.3437332146301477"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1-rc1":{"name":"@wework/react-floormap","version":"1.0.1-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.1-rc6","@wework/floormap-sdk":"^1.1.4-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"6c5ef6b646e63c22260aff8dd8bb291c149bc6af","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.1-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-4GoZKbHMYppTv8uPDf5JxGlxV6Q6X68Y8iEXjNCXcvmv1kwOtbxEo+a65bCVlokq+9Z2ljfCDPhZ8Q8V7ZikEg==","shasum":"38c2a34afaeae03a4321e0e34c7e50d5882eef88","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.1-rc1.tgz","fileCount":212,"unpackedSize":1183396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjBtgCRA9TVsSAnZWagAAvjoQAIqyEHrbur/k+bK0QFuC\n03BIJnNbj4VbkoCHFE5l6o3wSyA2UMupyy7pVhuZS7OXIE6SKHTP1oDNgiS2\n5eJ6vYfKnkNmBJVyislD2g25hCNyVJav+UYvp+89dDGFpbiu/lOjWy42duqK\nlRo8WgnRy9kUn0BqmArUpAuq71ZbQmo2afSpI/UzvLE5uEYzGuuubbEefY1L\nFcmgG+p/OQK1tCP/E2iMy0hhUsOXFQu3VPWfI706fyTSGLbzLhOZlTQ1H6t6\nhV0aRCkrjiYBix1sRosWJ3Z7wpOxU6BbfyR7ywhFltf82y8tbY4xe8pZXLOO\nf6uYvlRI5eEirSzHRnzbKfQBoB6Y6J7awOrYkUmwB/AJ7GF9A7kN/pKGZXAL\nHwrUdNE2261vsiePwmnb8wS7Mg/7iUkCJCA/XwgVdjNmzRopxb02NQjRsKRL\nk0KxRpOgxZ19Z+4aJ7lIxb9eFVm0/39RsBoOA5v+mJ8gsqcCvQmls5RZwwrL\n/wsVzzmGhn7ZCZFF0yq4KSl/R1cMPD8jc/rqFS2GMixsVD4WiPFg2k7UTcY1\n2Pc1ClxAif6mP1ZW3N1JMc078BcXPexrHcrZKiKrY5L0/OtNrgBPBrzCCpiz\n2RHV8IOtO0pbUBto4JnCmIdyvJr+hL1z0WgYdIPi8dKX7a+xc2efrfTtNtnG\nRtyE\r\n=6kGu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYkKUDoydfzXJJSbweRwkVg1eQdLBxsxVKqKrlMbCS0QIhAIiS4+nG8hcJvqeWRUVl7Bxt0yID2FCQ/m7+OYFAtiBm"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.1-rc1_1552685920071_0.7730870320291996"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@wework/react-floormap","version":"1.0.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.2-rc3","@wework/floormap-sdk":"^1.1.4-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"73740bddcd5f3f79d7ac4fde3d80296acec1e719","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-tVeyL3Bv/5t9rHxBwTcQ+H8r1CzzLMYbNyz8iTXX0P7blwnSd6pXfuBX+5Xu6heLjnrwzOBjhyZfj6QibhROnQ==","shasum":"99317c638352c5690f957b79f476227c274413b3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.1.tgz","fileCount":212,"unpackedSize":1183392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjCDxCRA9TVsSAnZWagAAIpAP/RPpyaSZvs0YhV3b36q2\nSxH9BZPrm+Pm9gIGQaYVHYwM9mWF9M1iMnqsKk/PIPNpOJpYYvfTe3/vl6Ex\nAqWkVsyGZWrXGSrchplcV1BFyi/QdwOqvy+E55WsbvgmNg7s3EU2JN7EGzXq\nSzbdPpz3QoWxVfOgfxYBfCrCYxe0IP0Cx3cU2X65pg2GeXoNk4vXif11OtI8\nZ1jHpqikI3v0YFF8j5lxD2JXg74yWzQ4MEbyYfDs9AfdhVASKV4/CyZ4rYJz\nGwoBB4ZcvPcKckIE/A8iNGs4XCx+AmQDEayPUM4ScGs2ncQfQCyWITy62S1B\nvNBiY05SUC6W1xDiVpm7D5EwME+zI5IpwhuojPy17GB0ydwE1jCuzvLOcDfk\nUZO87Wsc26E48qTwtkNdp6UXhfnDuz2odUJt2Tba5EYoRsgyXFNRtfsZ+JAx\nvvQhl/iwykXbEJRALQTvSc769QJviEQug5AlPP0N7OUv7Ee/ZU3Nyj3zVLkI\nCKO9XOAzrKfJCHRmLZBC1T6Kje/xfusEz5AQqxLIP/yPgEITgw51EvA1cPS6\n/2ALtAE1wqfoLuQJUnc4P8Iyh99setgXj00Y7aL+sukehOI3HtqFPJmpES3l\nED98zw5yqzwJB3VrX7zM02mjuNnLkzRNdWMntA5rmc15knh+rfESXIkvuNzp\nt0RQ\r\n=OyJX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjnc97RzqPSEc63sqXIVRGxl4WTBdTJ9TnkXh3jyBl/AiEAnAl6f+4O1vcdL20J5yway5bZ9Qps36C3btGIM5uqgFE="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.1_1552687345058_0.8962469307968401"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.2-rc1":{"name":"@wework/react-floormap","version":"1.0.2-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.1","@wework/floormap-sdk":"1.1.3","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"ac860c16a3e87edc789baefee785531dc6130009","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.2-rc1","_npmVersion":"6.5.0","_nodeVersion":"10.9.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-DrP5EkAPjkZtf4lP4UI0mEqLDpBjLLi0ApePhGBdzW7nG02nR5jdhg7tO3IoBzEuunYIRlSomC442s0QJIxXlA==","shasum":"2a97cb1a1b98f94c3485e4c0ee87c3ba39de4786","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.2-rc1.tgz","fileCount":212,"unpackedSize":1183361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckAfVCRA9TVsSAnZWagAA9bYP/i1OEo+U8PNlRCTQ9FpI\nlAqR17+dyP8YSd4Rf9pmrvBrXXlmEk1HO6YqOA218UKPEemxW6tylTO+WKjs\nxi707qRNbCuahOPGRiQe4b2njUTgebIlDsu+0drv5xDIKivnbNzoaZ7hhSl3\n4bwXXfojAod6J41Tsy0g8UH2LupAe5/r2x37mgydRIiyN8Wuj7feZkMNIeMv\nceOxbCv4W3aPDECRdGTvMajtI1YjVEebBpDiXTWwMmsodNMUs6Pt6SPUpM/J\nRLhFlG5KS5OqIKjK9yDdw2WuDnPQGlCbaFeOTEUmXK6WmDC2FiC5rl940jqn\nemuC5vH6146hRxfa+ddb4e9VwUMXpwyRfcAJfUWE8fLJ6n4bQMYtPbo4JEd9\n8T9PsBcMSjeP0Jnp0O9IMhJylWqJdrq+/RYFySXfvzSkxJ+YgAh5q9/b1rYu\n/pUoUQrOHgp3QL7jvHNEhr7GKeX66t7KNWn4BVoPZg/nNMCd9M6izWlQb+Kd\nyOpuWzwtDGkWW9Ob/sVMx+YGNi03cwLGvFo1Lu+7KgB+yWGlQuV7eNVqfzfL\nHx8NMQ5S+o8HgaK3JWYLIbmUvqB1N9TmCD7seX7c7btjkZ++Iijin4DRxW+k\nIi6E2Ts7yD/YIgy2viv/vfvkNtj3UGLyz0UpiUNt/A2WoEXpVq4DhVldQ+Ew\n2Esz\r\n=7Twy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyiadeN7mWu5tSRNyxTYUe9gDactycdB6m7D+LZR6qcgIhALRTliWJKqXQyaYPLlDlkWVKvzlHKUBq1JPsct7JFHXz"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.2-rc1_1552943060818_0.5302082086175233"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.2":{"name":"@wework/react-floormap","version":"1.0.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.2-rc3","@wework/floormap-sdk":"^1.1.4-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"cfd1e6cbeca5c858d5050d3407e95e0375d15416","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-DVIkzDlDaHyWpdpCpkeA4OvSxztrDmCXxK/LHynMJJdp4tP6Q48TP7gMaUCuCCm76RUrQKEuPWPHAj73Jv/h7Q==","shasum":"cfcab4581d4c215af619834e3e9008085541b372","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.2.tgz","fileCount":212,"unpackedSize":1183494,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckAneCRA9TVsSAnZWagAAvvoP/jORcbxijDTaN3Fb2Lvv\n/ullp1+tQud2C7z0LiM5k7ZZ46iVqgemMeUh8goSrKeFHGQ7c8EB7YjzXBvB\n6Q4BAfPD+Kk7OpTIcW0ngygwbsk/fZAuDQikw0zk+hX8Dj9LmOMQyp0jizXQ\nP5taAyqRBghos+sWGCVo3HwoujyFsf08MSmetiF8ffNzqmoLhwA6pXXSyL3I\n584UdOF07/+GHNjaCUMgF/Nd7IFOGOFnR4cVrlS1APdxd5erhPaN//kB/JuL\nI/y1qburGWwZWBDW8aC6jm0icF64mcHiCkKMYxMJlYajD348NrClrKsSAD4E\nZF8Jaz0dHRTRYWqTS9D5P8w/EBUu472Ny/owXo0RrzXhMu7TOYdUXfwUv/ni\ngO1hLb783qC/9gzZSeGZ6LurAwrLSk1Xc1xSpe91iGUNr522nmzWOPrkqEKQ\nTJS15F8Gd+0bes9CIv+IjjwycodB2SH+Ih/NeLiCd6LucGJHTyVDKnPFN43r\nIXr8JRv/0CIdIqRZZUbhQ8Be6l/J1hTMpCW8vIdYH7iZ2V/jZnT4Czwvr+8s\nSxbOx0aN/YK+HN7dI929ZqeGhsZ2CWiRyg4i4g8/zyFIx5tk4iTfePh6PR+2\nauN5Q/EyKczxze7drDr4ojavHAXXaDHf8VzvOw5j++VaJqoZR4u8V9hrVCXK\nO7UJ\r\n=6rKb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyHK4SdvkYgqq/QE0FZhOOM92C9KPGcXIG3gpyAdMnewIgPaRMphVra1ljlI18uc4ntYejK3nyd9FTl0+1Q1AaFRs="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.2_1552943581384_0.33565480742750875"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.3-rc1":{"name":"@wework/react-floormap","version":"1.0.3-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.2-rc3","@wework/floormap-sdk":"^1.1.4-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"763178ca41e10cd5d26904f9227452701759d7ef","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.3-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-aW1QtOJrnpUHR/LBNFtZWpgwA0linCiCEz4fGk2TPIxkdRAzpotY84CEPswBBOZsDLAFdweIvMKct19mBl9PRQ==","shasum":"3145ab1baaee1c88ff0e39e1381457b36f985ebf","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.3-rc1.tgz","fileCount":212,"unpackedSize":1183408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckAq3CRA9TVsSAnZWagAAnYQQAJ4gXJs3kCT+c+VY0D7M\nQOWbWrjPWKMryeXPzbce0dWoj32ZMJiXskhgQg8AZzwrQfENu1PECX8DATe/\nscDPVtUnbPYKybz26SNdofXPZ/n4sOzpck/Q3kzCEpTVXoXvwUOTXFYYsw4Q\nWAKOlQr8L3ig6wtq42sDLTcQM2eNDIfR4Nrfx1W2Aovpq0u6kCFlHwqo8MA7\nv8vWjGHvPSVG1jI0IEoOscRhfPd2eNnI6Y9lgZJUWc/wcA8p5v1+9b+ND7fA\n0hSJo7RVYEKqWBfmOjFessRRwIzzN8F/a7/bTYwCJH43vwASDYxokxBei806\n2Y2oTl0l+0piEO1Xg7k0J2PFIkUMlqYpElbpezsnxnT418LNSoTpGUGZ3IPG\nOpwBvK0+TnnRSkk0bIE/LQ7F1eS4iazorhCVo9P2TU7z9TAiBq2kZ/NAJeOj\nzlEI9JYvCaF9DXxFQBUDBr4IrINWq7Qj/QgJOvXAMzW494dwLZWZUAFB7OJj\n5hZiTU9/YG/yH5iiBHPX7heV93cw4x0/1wcatBxcZSiGpKbYXh+LERYsjQsJ\nqIoI4auevUwJiXCQAXt351um9BfD4TZGTAPLd31VaaWcwonuVZiZA1/7g3uC\nsuhXUvcVY/0nAezlgzGYnbuwh/QDtet0107K4izJHJJJDcwFfbPzXCccGyKl\nLb/k\r\n=2ER7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6i2/nYLMLlO5e8Vt89EhYHVi+WgR6X9N8eJVBL6HGOAiBbMQ/S8LI5ujtI9pne/lsOm06KqZpo+5DG+4x94g6GTg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.3-rc1_1552943796341_0.24454954171481158"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.3":{"name":"@wework/react-floormap","version":"1.0.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.2-rc3","@wework/floormap-sdk":"^1.1.4-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"d7ab9b35121136e4ded72df035bf8617b252460f","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-U4KDKGUFa/KmdnLvL1rEqyV449vtEtkHzA0agm1xTQhpkADM+ZTl9j7ykwCJ21JiaAPgyWTYIbaUDvAHRq++oQ==","shasum":"315a3e43dc5364820f8eeae49b5cd9fe17abb079","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.3.tgz","fileCount":212,"unpackedSize":1183404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckA0wCRA9TVsSAnZWagAAYeoQAKL6cvrPPWQYhdGu8BaP\nWx5R9kxl3k0njNCfZ9QwPd+QvP5czyd9IBhnsCjEhR3IdXF0c/KD9JzA6jPx\n3lGE33cPDr/do3nF+CFjdx+aGgJcGB3kei8rCcR5lsdK7wJMPL7yD4Ai9gke\ny89nmGRYSrTCbeuLBxqRFjLSmh4XWDgchKaCB+rFdMSM3f/eC6Jg9Nnqx3Up\n6v9pGOTGcikWNGwFiuQ1QOsA8Tlivns2eEqvYLAQJDmk9e5jFhwK3nE+oao4\n5aX54wYLEL0YXASnyxxey3icbvIDBTvD5p6vYlhHFM6bVUEEGNiT25IfNFY4\nQ/EqFXlrA8giclrgGKiFIrgDlQKVIf2a5J5DxCTrb9mVDYh6yrh4Bj/R/jnt\nUcpU8/m5NQdF1C+64XTti+ruUfy+R9dH/7PRsZv1egxdVv1JJHRAXiU59rFK\nWA/ThIHVmo3MzOWRSZ8nGpYvy5mpgb9b8j3IERdFcGiOW5Y3wAjOhO2crz33\nSwphrtzaBd0SLS5LhlLIVat+jJu1Cgo+E4ehg53R9ZZcoAJMF5OgGU8KpkmG\nT0SqD8gOaUeJZyj1XsOHXqjVSaeWUIQjtpZkt97Md9ssotvd6qq1auYGQoTf\n1nGcx380Pt5k2nUUfkJm0r8RsxMFOYjdv3S4q1p/mSA3ZnLKyggCNWMfcgLE\nrZFx\r\n=PdoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaRfBMxgg2dFOqiHglnQEh/hjuW2JiXjCd9GLIgP5fawIgMXJWXJq5HON6u3qj7on0mpBiHlJYM3Qp4ck/EtsF+Eg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.3_1552944431528_0.3641166193622194"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.4-rc1":{"name":"@wework/react-floormap","version":"1.0.4-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.2-rc3","@wework/floormap-sdk":"^1.1.5-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"^2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.7","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"a7ba15847d1cd118c3fa72919d219977e0d0afbc","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.4-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-3Mu02C8e9y+ucbwN3/nkkgI7rnbQ4hzdyKupl9TTXsZYGFYjAjX0VAK+fvJlJ1FyCkGROpbvWaUl/XOcGgTA/Q==","shasum":"3d93bf660c2bc1e159a598b80be1192313f90c01","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.4-rc1.tgz","fileCount":216,"unpackedSize":1194103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckn97CRA9TVsSAnZWagAAQo0P/RbNwooCNuajY7HNGKGb\ngjE6ruHI4smK33diezmrF323UUTDedYA6hlDziTpqGQcHSUjWKOfC2BFVqRf\nFSCGYs+z1DbZb/CGGJM/ITVAG+ysBIwf5pQEeFcK7If/gy1dB9JI+2eddIld\nrj++hOG7GEv+sxO/3IlTcAx7cmZprIhEM79ULOMhQziM2bfZySn2RTH6IiWs\nTzIYr+UHnntWboV6hVLRdBXZ2ZXp5Lybm3Jxxokq0vrYLkVIhea70QB2dlaD\n2TeAvs/ql6feJRMuAXPcvWSDz1EC/oODYGaFk0K44IvgqeT6+v7TgpGXbCQx\nGRzzV1XyPsHNXnCC2jJzBlzWAPGDjAhqMg6UYzNSEgSiKbf47LkYe4X/h+aD\nTUJEadkEQzL/E+wDbnYcO6W7YAoHqdII7oUo6c9z2fHdAjIFC2+KFveW4xV3\naSatBymVmPimr85coPU3mjUq6KHDKSvvKlWITysb4E2k01quvCUIi27xZNWX\n5eW9d613RXAL+jaFYAcxPXcDazIJd5/8Zd35alPy6BwLUWr1zDY7EhzwbC2h\nKWnDx42x4u+TBeFHnEyAyUlI5xU/Ozaq1U3B4SscXWcQIQWwoahoKBTbV+zR\ncTP0WNUcolp/OH8W/20291ftKGj0SYs/hXNJ5Py+saR0zi8Ch50VVrSKJGvx\nIBcm\r\n=3AQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACYyN5mO6U0EC/gPPkiNbPXvN5ntE7C52sgHcITL7S8AiEA59E27Jlb2//0LXBiQm347xUl05TB2OAsqs6n73WJX2I="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.4-rc1_1553104763202_0.5049554725605496"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev1":{"name":"@wework/react-floormap","version":"1.0.5-dev1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.2","@wework/floormap-sdk":"1.1.5-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"ec70712d54da513e75c916b4e660bf87346a41d5","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-OCqIU70QbBkef7Izw+e9M92OspzxMjavoKXsl3UfbEe38ZZaY1GyOWMPBaOt4YxCbDnTFsRcD3HUWmcqQ4lRlA==","shasum":"51f8ce1da4e562b0dbf4682ccb2cad0d926468da","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev1.tgz","fileCount":216,"unpackedSize":1194097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckpBACRA9TVsSAnZWagAA0ccQAJNTDXwJp4m+0pzVbtF1\nPZBZTgiKH7+p5WSDFmAuNlZMDkP/Drz+XEJdunfaNoKOsCVyz37DkUsnR4qN\nbVvdbvZw1u3S6EuR12KTrsW4PMdkK7kjtpXw2mYAn8VrSQBss3nWrDxBZuI8\n+4YXBoINLJFc6DfQ3jUN0VQC7Z3G7PrAvIx3wURZwxHQbkwQlp94iKOUp4f7\nPRoFxCZWNJOE7Agi9MmjHEI1ZKpb9ELVZ3DMR5zre6Wz1TIv+5Mo38E6U5vm\nNjLrgtHke9izRTsKBm5oYul/FYhzZctTJo45gWbvyD0Qep/vkw6aZMryUOn0\nZndXEArc7uArZDlsRTAi9aYdSNtq+NVp9uUgaxM2lO09/0OSfVbo+Pr/b6Rq\nFzpNVVKlYeKRKm/ZuVrDBmWYsBRL4ExO6OHjjdL7oWIFtYsbzVEGXIiIhJMc\nK05z0n/7Q/jZUIiCJBoDgn1EQmnF8R0BVM5FQExBZY5C4FsTZXHwCq5l+GRs\nKR3NP1N0g/E0nV7Uorl5TWUwCHg87cnh1Vao5B7+1g3388YhLzp6pgw16wtc\n9W/hpVf25KjxpO7kX4vI+MyX9ZIbS7ilbn15RPpsQKNFMCtGNlMpk2K8iMmC\nzVpl3Q2Nntdn/busS3ciw+Ub8h/6gAUjXwTzS2joNHZiw4KqtkSKjlX6p4I/\nlNQZ\r\n=G9n5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfWc72ENgPlo8LufDTccZMxSyreadmHQIT91v9OtPbDAiAZAjInG7OM4SxThWkrs6JSRmhb2QjLp3x6x8Y86ChN+g=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev1_1553109055519_0.8314246180336116"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev2":{"name":"@wework/react-floormap","version":"1.0.5-dev2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.2","@wework/floormap-sdk":"1.1.5-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"e6f09920874db6b28485ab45719e2b6964c8896b","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-64EGV8jjEuMvybmNquI6EaRayjK4KTTwsMjl8YzoG99qba5Ty0GZ/PEaOk78B5XAqZFtteR3DzY+W4bBoy53Bw==","shasum":"4ef84b0cd8c8fc770f093123606dd66ab016e139","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev2.tgz","fileCount":216,"unpackedSize":1193956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckpC4CRA9TVsSAnZWagAAr7QQAKJcA9cCgdC45idIbxXw\nVDqzofHNkQmjy7vNTyFFEQv1wcG65/CoIjJs+ZeUDnOMaLNIS8j4fakUpAWe\nPRu5y1hJl9Iak37K21vAWGrm4ZUQsAFFjZrd1xF72kUVeTynfq9y5+KOEikE\no79MQx++oXYe3pixtriAajjZXZtVYtZD2H1x/VdLcmR3zuI/FEZNO383qWr/\nZSjs1sa7ufDc4MzhlL1sUOEdWt9II7+Shpq3k8FXzVX4YseqcvXsOiRC+yqh\noJMdwJV25YKPldirHP5WJYOredtkMBSejSFLddUcr9cWKgL5M1dbWJK5jsYG\n7mFEg44oVj8p8IQV/gUrxMHGZ9Tui63DFUVyOpl52gM/6yH2KLqdbftSIGfw\nWKJFuxAiACuuEq8ZgZOx7gfw2Q1kQgfrmXVy6fuKoWwD33VUoSghqA52VYjL\n2LjCx4Eni5legOcrAROnHMStCuA4iPwEFUVGsGwVG89tzoqMSuA5Lx4/Nv3s\nC/hxI31VLD8ujQojUz6xbzsy1xr/Nmger8+MTS5dMAkdOWy9jp9HkTFrH7EZ\nbZkikNO9AF3miYbJhNjlUlNZie9d4WGptfLIahMi7uWNzmEGU0rZIeUGS9h4\nsUCYHF5xjR6JowGPFG0zuaWQ38h7DvjOuAu61PTXkY2avUzJ9RlObi1sUoVT\ninYj\r\n=Akxg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAYRYKCpJ5IUtamWSA5cuxwLzrXA056xKHuKFvVSz8/AiA6q0zRwFZ31roUVW83EWOfZW9mJbc+UKZlaMscH3ucQg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev2_1553109176064_0.5623576102037755"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev3":{"name":"@wework/react-floormap","version":"1.0.5-dev3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.3-rc1","@wework/floormap-sdk":"1.1.5-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"b4cf6aa2369d6ed7e4e6b0cf64fbe37c7347009c","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev3","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-skPAvPF9Qv9pgngekKUVHXk5Aul76Kj5WiIi8zFDMOw9i/reaXy1qyiF2OVp3o62tIiF1eewLrZoj2l4le3OvA==","shasum":"1543d979e9a60c1c50aa9c5731799cedbc342df4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev3.tgz","fileCount":216,"unpackedSize":1193960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckq8iCRA9TVsSAnZWagAAHWcP/R/8xEMMUwUQ/YJg5FTs\n1QN5BKW0xS61WiWcMeYgPzuqGa4VvQ9+ukKnF4LuzsR+l78LYTsl4AFTfdK3\nv0Hcgw+FdUAMjHe7/m7xE9QvlQ3wJeePpMQaGgLoC+C8oXEDPNOw53j6vhmL\n6YrZRUT3tb23cFAmhaT9HIE0HVi3zp+8tMUcKpqD8hcdaSWRqINzQTVYgS02\n6LNhW+3LGOR+HQ6x+ayNTxId/UKH+HQy/jMet6sNuYaNgQy24YplYf1DmyUH\nIDT/NhY62fJ4/C3rlteu3s06UVO0IlaNr3hbMDFSWG6zP+yC2t+Gi+eO3U19\nVFRy1ed7a1r7M3bG3RJwH3XphIZia+8ppAz12vXU/X6M8dU7vfatv4ZFoLF9\n4XiBOpDAYlA1Rna9cdR0XPOawwLpx6fQgKhldtoJ/nbuE/pkk8PS+c4YtNbv\nf6CR0SF4nLIa1KBUF+w4rt178BiT/GtRKSPCu/WXVMJfNCYBIMi8o1QyJFHd\nf9+Z2xd+D3TW2Lo67fECAqatgoW5q5HERh/M7k1KxPVqNvjydddL3PNJR1x9\ntKUklDl13NQ47Xel6gmYe2sJpRINbXpoEAnl9Vcc7q+JYxa82cV6SzpOujGx\nRnsfw3P4OuMsw3eqBIgbs3kv8XxenQcW+daYyen2SS+hvGedwQ2Uk5pnVoWq\nU16a\r\n=7ixR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCdvsbmC5/xff0lEgENYMXwOT0E3/sntnmZLYbOcxpVAiAacqxsKpDhMjTf00pr4+kZLFnhDIVpLJr0YBqz0iqTng=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev3_1553116962251_0.48929907856693045"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev.4":{"name":"@wework/react-floormap","version":"1.0.5-dev.4","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.3-rc.3","@wework/floormap-sdk":"1.1.5-rc1","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"ecf7f864aabecd1c194e40bea1c16d0dcecda5a5","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev.4","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-zpMcF4kQE+MOf4pM+ebiiwyfqcJ6Df+Ys9V84vLqVe4LGqLO9r1IVM8W6vr2EhyrnL6r0inEU0fBFgOyp/QBcA==","shasum":"0c4a628fb8b388d6f9b0b0d2c39c8ff94e705498","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev.4.tgz","fileCount":216,"unpackedSize":1193963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJck5UECRA9TVsSAnZWagAAof4P/iwyCfXSp1//CUyieYZ6\nINFGBX1sp+KkXFg9PbaBWXmHnEnN01LkagCej2BhM3qlSmNPvp/fr4WOSPmM\nC2x1yAlKg4QWaMrXBYABZ7Vo+/vq7DZu5q/+3HnzI0LIEGtskosmucLg5abg\nQNvygTKEq18M8jsKhn0eONWC+ilcnzza0ERVCzw+I2YNJjddfvTBQUfHNr3G\nL7cFTUayfOvpzUYcgADAcmaFkYq/mH6lX0+IHSr0GLf33dqwY2prEnF5XInQ\nmgzCLdRSj505ljD29ZeHuLWTxJ4ahf0rplL1OC1NHIoBtnQY8zIMCFJTqkxT\n1CQuxnXNigD/ak2+mfxYr+mB/jdpvNhtUX7sNwFTXViMsV/Fh82V87z7N9NK\n1jGIWJXRjZx/8N86suzKwNs8qnHX8aNRbRRjwrhihGOPNAaKGBAbdghjajK3\nhXq7ZuJALablyr/xPCsoVXEvcvSihvViPRMFeIluysNwbr/wgQbayW5VRmRf\nVvCVvWyfRTyPzVzxh2sqMc8oE518kJh2gLzG3eKxSUMa7m92uTTtftLtzTth\n7bpn051F1Z8vAo9Rk5M+aCYqtly2Q6HRT0vYSewIkbEf5UFtVSO8TvZSvvxB\niA4wLoaqbVcbBPgC/mDbg1NsOm2PdqNX386oKWXIaNr+Gv9g1+R0btAI42eh\n43QV\r\n=mt+B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkYhkroZi2QBwR6+RTy3d/mLYUkmUYv4IKEOxjZ3rXnQIhAJrs5ooULUPhW2G6kLiAED4hA5kYN0aj49aLvvu9qrMI"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev.4_1553175812182_0.5637713904338204"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev.6":{"name":"@wework/react-floormap","version":"1.0.5-dev.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.3.1","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.3","@wework/floormap-sdk":"1.1.5","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"2de2b3eefc00ec69c7029b0e7edaa0068a7ac768","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev.6","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-44O1y7u/tEvew6Q2gIWEAAInN6qbPygusTAZzakDVxPVakOJEq5cwCRmCkYO9u+jvlcb+bXBYEe4A0gQrH5Aeg==","shasum":"3599d95e861250882083ad9b95b0793bfdb8a9e2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev.6.tgz","fileCount":216,"unpackedSize":1193953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJck6vBCRA9TVsSAnZWagAAT5gP/0m6n+gnoUtTWwlajV/Z\n/6b+vgmgyzaPwI3WYpYC+7h2AEpbYotxog+90HFCwemOXkgiQMX3BHzfDdV8\nIamiJHA8HI77wYmwe8UVxEexEttxKGS34ETS6B5i08M1WxLeECmjynXP/ZoI\ncAEywKkWTLRWinvdNtGxXLCnXdof+ZYH6VVqETUk1BCe3ro+7ZkYgIF1YcRV\nP2c9Ik+6Vta4K2m20PJmqiR9LxRuNpYIa5j+YmP4jcQYsXPV/8GAAJeLhnbI\n/JSjP0g60Ug592utc0LsLy6cxv8mzGvtnZ3k9a0J31bENHUTroNOgAG5LR7n\nT1rIMBa+j/EkutLwbMaAjCUjw5j3wvIwLjvnQGuwZh95jPInPCVeGzQom+kL\naTnTW/7syfm4NtYd2BKg6IeNI4TXMM+a3KY3SgtRYC7m/Ook+4n97CHnFHxy\n5mjxFf2zHABj/bd73Yp2seAZmwpMR9XRD3Dg4mOX5d63p3ywQMXvayEvbZ82\nX2+HYnltdUWws1F6rlLlPaQE1liOBJwH54kFh7ip+ziSgYdP6qiXTukIbMLo\nhzAeKchi6oO2O3aCVIxOdn5eYprz9QcIH7ZVAZIhWQBwFH/OIhx1BtGrlcJB\nERXigUZPjsWBzofalNZuGqTOoRh4uxzAcf5P1YwOTz3Q3EnNWSnZJmZ9oitZ\nvfuO\r\n=SbXL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD52mNTuV8FDvj/Z9mJ1GaormI325Oh4NofafvKcD5BXgIhAKItFOIoy1QANfz2WaGwHs7WuqeTWnWSkX066dY1PItI"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev.6_1553181633033_0.37970909232411354"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev.7":{"name":"@wework/react-floormap","version":"1.0.5-dev.7","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.4","@wework/floormap-sdk":"1.1.6","algoliasearch":"^3.32.0","change-case":"^3.1.0","classnames":"^2.2.6","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.2.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.6.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"e6958ea69648e8b567dee900313f04732950c449","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev.7","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-ph92nbtSRJ0rodxjrAC4PSmumJV0W3Z58V1xoLifiqNduVyTwByRbAzQWSvT9fntbIUcp4e4vTNACnTFl0O62g==","shasum":"17877a2b374d621aacc0d9e66e47ed1f3228b3f4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev.7.tgz","fileCount":216,"unpackedSize":1193953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJck7k5CRA9TVsSAnZWagAAui4P/jafPvJEqG9zBGsiPGCN\n3sxv1nXQpxK4nHyD6CJkcBSzshCCrpvPfflKG1OCB5BJ3ubvyqEW7MjrFwcK\nfI26MVHCWtnYSvV0f2s+nyeipbxrbKW0l15+3SnfkKFvQB5+cPQyHuHS931/\nvRPmsmnBlJHFVxGKj/ArPpNl+DBcTAoWBpOOynhHP0a6QYjc+qMUQbOtBd+p\noxJ7+02fH0yh67DIRfnFVyjLEp9UI50Foh+FM4kNKUoVoq690fzYjjxgFv+Q\nlAYxK4FOzDAg/CBk/loT/bLnrvK2oZrX4DtYEiBnFNk9GTOZ85m+71DL2LX7\nFR4KptPsWPL/8kxSsvUJF8LU45AgOo7BJcL+xspHp8fkahAktPJFVF71G3sN\nYVtxEy1tsMN+Twco/1W6H/uypPZFdbgXWFzNMg2MnlgsyPDguedexQMQqF/w\nmJ937usxLfdp3Hl2zIZhWbZtuMdl4WDZtDdj2rebfuNNbyRthbZw5aL5dabg\np0atLa6kfgVG/H/TLTkzM1WMuAEqjeTX25wfVYmm55oVh1x5NPVMnBNlRUqM\nr36FmZam2T8Q1PIsxjcSYSI8KQsVXaz/VLYVN0Vo4uknpq6OXpSvgjBxBSYu\n8G24bDhYKrp0oE+OLuV1IfwRpFvurJfF2Ozm8+hpB00JdSkYZTdBqhRB9s0j\nNc+k\r\n=fDjt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDKJPubsUiIhBFVzzPNoG6rFgR7XrE/wW+fUzPS5DWkdQIfTG+Hj/oCbEn6q7lx+1rSXqlQl/09cKoxZ7XvTrcz6Q=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev.7_1553185080614_0.898005233732418"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-dev.8":{"name":"@wework/react-floormap","version":"1.0.5-dev.8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.4","@wework/floormap-sdk":"1.1.6","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","react-joyride":"2.0.5","react-month-picker":"1.3.3","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"dbd8356fa44a91b2e2876f7c7636670c0028bdf5","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-dev.8","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-Pscf7heRclFUr/CRHRZ9G3UMYNZ+IHi+fPmrL8luvr/R+Salh/jHy3t+QFOmSCcA7TKb0avAk0kuxoc/P99JBQ==","shasum":"5247ca356cd078fdc0784b0bfb3c1314878067a0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-dev.8.tgz","fileCount":216,"unpackedSize":1193924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJck8DpCRA9TVsSAnZWagAArl0QAJi2NsO4i7l105f7MhxH\n4GMQL8+60A6ldY+e2UE5D3f+1oVli1GWEed2PfjxFF2Pz86pjvTQgXsWT/pt\n4BX6vSZlXKK4LJa2yKzc7Nxi9J4NvdC0WarA7PcjrsPbqgszAwJvitp3/6IR\nYlqdUDbPNT67IHLhitXl7T/0kR0uOsMsmg8NAzih0VqbRaj5LHITxrYfalNR\n+rE14Vpj6AC0RDSIPRUsXHkh/l+KN6JxVyUYnvCx84hsLnaVWp0fN0PydUuv\nDBpNnZHVUGqWw5jofC8DWl4260aKlWIZVVD9oRspgSjRCPKIV/SMCjfMHjOp\nlkXVHP3Pi5+ZHI25fmfPeC5ZNyA7X8lc2fGZE5XxvUYw05J+/LoBel5LKu6T\nepoXZ2YbdbT/JuxexW8KBjfeQ3dhAkVN0FiMWpaYP2zrSLG6Oti0bcxvaGeW\nTMn/TeXRzmsEMxFIrPhPzEMvXT/kNQZNIomHjkkBStz9gWV3DALk9STCOM7/\nRD4dglz86sWF/xNgmi6gSzrRKE0JYtLmw9beynQx1xf/s4I2IykwMn+3NNC1\n2vBUw5LJDItD2qMRzEKmmhokWdbQNt9IT9bjm2z7uSZFlodBbKU6m5WUYIXo\n/wS2X8fB91K3Eeo35l8Tr07x4zMggBuxvgXeXV866Q+6BPVeoGeYa54BxJvt\nibhX\r\n=Tnji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYG/sTVQb9tURBNRF8Dbqe5aaorFgbmlAse53480WOxAIgDGz9zwr4Egf5aS/+SCHwd/Z7em9FrXTB/fBllyTq1ks="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-dev.8_1553187048653_0.4041768632018463"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5-rc.2":{"name":"@wework/react-floormap","version":"1.0.5-rc.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.3-rc.3","@wework/floormap-sdk":"^1.1.5-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.3","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"cbe725091fee8f88f7e9aab38219756235bb0fa3","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5-rc.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-ErEzqeGKPkk+xDAzHAgMLsf9+8sscbz05HQR2+kkd4lWlqOf/Te+yfvXJ3rJZJj7ceU7zrJBdyDqO7Egi+EsWw==","shasum":"5f21eaaf4b505aa05c5ef88cff2fa648f5eaeaf7","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5-rc.2.tgz","fileCount":216,"unpackedSize":1194472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmETHCRA9TVsSAnZWagAAzKMQAJWtEW6ZwWlACFjHXolc\nKwlDMlabAl7S86W0vUvH2iceccBlnRhYatz53KGsd1+fF2nfL/b6oIebZNXK\ny943w5VkWg6lSfMAK7xi2LiykCGyyiB+6HbBgAAfmM3hU4WbiuxmbMCFGone\ni4lHhVMgDFMFbzQo0dogcIpCFM9pxQu5631cSq83enbwNr1GL03CzYANQdkE\noqgLHuKAa2lVqy2ULrh3FOcOREis6E0iUBuOl+36QADMAiFaacuqLoV1elyJ\nCcm6ii7lLkCt5OXjlLjrJeqvhGykbolxSDe1kw5hgEirdFp58QCmtrkh/QNg\nGVGXUpjZC/ZspybMs0DZA8T3xdy7KU3a4AGGvFhmSsvM/2qI2yT/YalEgz0K\nc6bEzNfenwztHeTP0hz0fCeayKg2eC9Mch1XhiNQ5uvWAsuACKJXb3NiiQ3t\nu3+cCEimLe9aTn3iMk8PwWgj3wffxQlhZzyK/RA5AcjcWrqThRFFRflKBy8m\nGQN/BN+W2n0wOpui9GMeJkIdbojk8DqdeUOlpur2XGKnTTkf2OfDY5H94wtL\nYgTXV2OHKGZHhaL7fLCyzoMXFN91N+kkfUXc1MskkD2gxAkhNolSQJttZmET\nI0b5Wvh2cGIsSAApHElh+AOfLbdTDjA4EeBPyjTsn6qFA7R2MvEyAymIZGP4\nYVFE\r\n=yZuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQSb2g0pbAP+Gqxp8rjo3N70IQ8s+CL20FnaMoE6iP6AIhANXoMAIY2qOe8DUsFQL+4WTsI6A58X1f6TYjkSo+jXN/"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5-rc.2_1553482950899_0.34680355656404016"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.5":{"name":"@wework/react-floormap","version":"1.0.5","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\""},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.3-rc.3","@wework/floormap-sdk":"^1.1.5-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.3","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"gitHead":"c7ea80b38f7f206306b439bd70d3917dc2640575","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.5","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-E8QcsK0CBu9kkoibEx05ia/oTlsnvDFIW1VOQzz8gcFGuDUAc29hHCHtwYUJQDp2M66s3dpxhWz3+w++Wk3FqQ==","shasum":"ad3a24a96c1800653a071aee496f6e2ccd5f33a0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.5.tgz","fileCount":216,"unpackedSize":1194467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmEhfCRA9TVsSAnZWagAA7NgQAI5z0SjKvJoAR3S7qHwD\nmEBkwDPi3PV/8c25ssWiLofQMIcwZMBdQt9L6brqXfprjjbIdU4+wkejcN7Y\nScWDscBvmJoSllceg+YQPID5zZxJaLHziKgodcP9x2cALdsKQCgLDJf9nLJN\nPqbnRViPVzZySYZh8iCfVFYc3GKb0N2oY5h7Az8kgX92zFI2RdigvzKurWXF\nbYp18r6YaFOWl9DGJhE8PvyGQchUbRR3umd7eQTOqJETgVARE1VJDJHj/i2x\nqcwcevv+gCj0Vzl9khbqRFtVSnc56IQCR59s51KtEC7sKXhgZ0EkWt02evTh\nl2ERyUyHgYtiWoHero1yFxrH0mLpFZWnAnTy4r1u97ux9yN3sFip6RkRVAV/\n3xf6a+lwHeX3JbmgvHMMy/Rk1yYZYGyHYe6zaL8AvvIrVH02Wrbt+IBYZx2K\nQD1cwWS40wEFjdTgvzvrqo2rxGjwJSjSaC1FwXYrvgMy8pz1nafLcovYfqBt\nBZUTsr3W6a2T+f7t39nJ6UpULvaBZJCUWG47qvtOKK4+yeb0plF89+MLztq3\ngqshW8IvqcaEsnv6tHnl1wBURUc0+prsqU+qUqMYL2aDdQTIJw4ugDcRUA8h\nkbRDZOukgFwYpGgP4CrGbfcoj/7THRcip0VVosWOP8MIrEASposj1Qr5+Vam\nWy40\r\n=Dguf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUNjLYD1BjM3Me6e6jFs/r7Z6z+gMR6TMwWBhSlxufhQIhANFIFjxsMswIjZBN6MYZ6sG0Cr34jCUBXP93orCXe5no"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.5_1553483870803_0.6174432904228246"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6-dev.1":{"name":"@wework/react-floormap","version":"1.0.6-dev.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.4","@wework/floormap-sdk":"1.1.6","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"99280187ec80914ae725e4927f7a1f7583696fdf","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.6-dev.1","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-FPt8/we0JSR7f56eHvKotvkbYE18afaVqwTVT4gkydZ847OmBo6E4cMW1zF+llY1xhVcWwKS4M4c8cVwuhEpEg==","shasum":"2d8497c3d7b4a8bbd4d36c920c6817c313f57aad","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.6-dev.1.tgz","fileCount":216,"unpackedSize":1195721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmaheCRA9TVsSAnZWagAADqUQAI0fpchQDAfllvQX4YDS\nEQcEEOdaE9Y8znTWI/KVS1EMERQjhYlyXQYBVhv2eVmNg+wd4tWT3+SaNcxD\nsE/YxRaHLjDaQ5l7/OEt1527dTtYbXEus+WXoahY1LYvsNX9+Qe+qJoxpbb9\n6YKaPSKOm5VZEJBj6cgOAwXNyw/4X9Y/z5fhEWEoq3K/jVrThlARrOlMQDl0\ne08kcOXtEw6kKp9Mr/Ym5bag4Z0O6r5dfLiy8YqNyFvi0Yd5NAX1BI7Zo/8n\nf9GdPpgt52h8RU7cluCkxd9xeTHNbScskFIgshlNBDMPH54MGTxYXA/zbFwR\nNgs6wN6V57R4/rIYIrp7Sa/ibDtnEGZbisAHkT1sC+11ixQsdHhiifzOVVn5\na0+7pu02oJOWVxPAMgLN1M2qzteLUeDWnZ8bZskzrEhSWMx4KFBosLDs8IZO\nQkmtaLX8O0k2VucjoIW6yzDzK/s/f3N8zSdgLtvwUsMmxoGVo7V/QmfAC9b+\niZvMbLALaFw0wXFBEie5lpL2o7itvP1ENqTPxOkljZCwPREBM/eS8VVfV7Jj\n/aZrwb8TQ1mq5oOybmfsVjZM0EaL9vSGQqM2AduZnRtewhX2eq+tiVRe31Q/\nTwkOJ86kJ2FzlC9a7lBBD3nskxegPrw5o+geuwFtEHjufjHzJmunRT3m1lTi\nHZn0\r\n=XoWt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbE41Fp096l8Cg1ospeS2qMcKV1p40qFWIu+OhphotfQIgGuzuDKt8ahFxx1M4/l5n+jYaNzU7wtuSLgC9Dj/KoC0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.6-dev.1_1553573981067_0.754313562500649"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6-dev.2":{"name":"@wework/react-floormap","version":"1.0.6-dev.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.4","@wework/floormap-sdk":"1.1.6","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"52377cca2b37fd282afae288f326d306f3fa7d7e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.6-dev.2","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-Fnz8ASdXhHvURd1yPIMcANjxEE0AAsbEzxfLZxWBsCxiYk2YEtsmRjERD6q0as34rZCCp+ziS2/nX84Ja2bExw==","shasum":"a76ad737c06e2a933803bec130d599ae56dde471","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.6-dev.2.tgz","fileCount":216,"unpackedSize":1196744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmbUdCRA9TVsSAnZWagAAW0oP/jxKCbrTbkFyvzLfoxrf\nL5EjVePMI499bhumZpbhB+Mo3bXN0RqBgSL7qf4j580OXdAea0WGdinok6Zf\n7mPbYjajcqniLYK3d/k1Hfp0lv2DjOmV7F39IyLcvIosLltbjBX78KARRqF0\ntTD8CgsPf4I9a8OpKn11khR0WumnLHsNP2A64VgCFhWQPHWO0TLPK3xmsqMj\n0gt0ho5dtKIZR5NXoc1ksGdsUOo317PIsHwik5Kk7to9CaY/S6zxOZGwwA6I\n0suXYZHBNlqSJguen9v5jTFQmkwsClh/CtjTzLZ1VzvmbCiNu6EPYAw8BG3B\nCsDfhKNf3wgZI20RdaLaLlV5+zM3xS4LXVEGTNPKW/21P7TWg6/OOacKSn/P\nTrYH0PuNzChqmFfKlI+5lXKL8Nk0r6oGrXojbMSbRelc3xzkJs/9Yp0cQBQl\nLEidvcGBv2OsrNLyyXYCDLyQI2OuN3lLOKwTJ811aMklEJ+Dn1fajStQYITi\nbyE4acXB78nEFZz5yfwLT7E1EYYfayddwUfffb/oERK/G19VBgiC2G2X85hO\nX2nwP01tvDuvPZokhvnKgo97GtjCROYBeuHt1GJiVzqJIYmExVAqOFMUypVU\nVrNwPdyCpJQdQ/5nKAJdOs6/3ryJyu1j+xTMrab1XkA/HGx+qmebE85cKBJh\nB2Xl\r\n=U7qv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMXbWs/Fyp2d3pir1b7fFTgBMqA7lP1mrMBln0f24LQAiAXOdxIsLowWaEfFAasrEJUE1ntdXPZfim90gFaS5A3ag=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.6-dev.2_1553577244508_0.06197360047092482"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6-rc.1":{"name":"@wework/react-floormap","version":"1.0.6-rc.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.3-rc.3","@wework/floormap-sdk":"^1.1.5-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"b8532d0d8b2c2c32cbd6d262547800ec3b8b42d7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.6-rc.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-OrLBaf7koYfa5uELIHrmECGIFuspeg6+QWSm0h6iGP+R7L9QIpJrFB5AQuW5NZE7S0naCrZXC1wv6Qty8JuDRA==","shasum":"811ddede4664f1b4dd51d4fd6b10ac9055c6ba26","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.6-rc.1.tgz","fileCount":216,"unpackedSize":1196898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmdXUCRA9TVsSAnZWagAAy8cP/0HTjLSuU1Z4qBmq0EmV\nswQezqBO1NErLX7/16pWz3QuhwACg5FmZIVkwSp2PUO6PdtL7dvY/FL6sVAl\nqqPUIK2596srPhFVTI9TV2MicJQu+SQeR4JtwNZsmVQDwN2dyFlsTANFxs6Z\n5f0uni97cSDPYpyn/iu0LXZDaUSXEAve0GX7Ir7GAKnfSVQL6uzEbRoIP611\nfP2j5m/a9dDwnBS6ttsE9M0HTJRyAvQIVZ70MT0DpcrnB4xXDNSt6p+21/9n\nKk9iJ6k4xwy8uOshbQNLyZ1+4p5dYz/PjPrB4C2BHMj1ZkZRfdVmUqxPQhxU\nslWrfMw5++Xs5IFpbtrxabaeHH7p8jZcP3k7T4AfCg/FjQCz1LXgJ1XSp9Yj\nfKaH3gIDTGVeJqYHZD3ZkpdcPldo/wEWgq8vpb3EUZs7p5yAWOTtM6UtXyFN\noV6pH/lIWg9d4XjDqtYYLZSGWB5vAWSu9GzPVOGG8QUk9h7zWT7ErEh/iElK\nl2HjCRo8Pxws+DFiXXBuJsYRiyN62fTJgz84Vf48u+6sHSDte6A5qy6L0Hpj\nLZ3bi0bOTGCM2E88S/dOt6j3PxT2zFGO+0iKUtINI0cAnGOHWGC92BiQ0Qx8\nNLEmn7lxpi7V7niWEuRJch/a0BexmGfcfDZv5ZWtQSPL/Q7/rBYM0PFRr6p2\nq4fz\r\n=7Hu0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKsuODmrZHOTSv7QxVXgxga8xKy6y60SIJPvvsWkH11wIgI7zo3S7rr6eS6HG7NxPCDLzIIib+StkXpUU42hUI048="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.6-rc.1_1553585619587_0.1780810012068883"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6-rc.2":{"name":"@wework/react-floormap","version":"1.0.6-rc.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.4","@wework/floormap-sdk":"1.1.6","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"007fdcb709808ab7b61b67129c718ab88449e0cb","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.6-rc.2","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-1zCoIU56Gv3fUE0VEnBJ2m4g25FTz691kf7ot2ILEZxfWxylyKd+jOZyeJlAtcugayo8F9xJNBmI5IR/i9vqqQ==","shasum":"bc37fce2be94678ba2b38182b237c8b4163e8736","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.6-rc.2.tgz","fileCount":216,"unpackedSize":1196887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmdcqCRA9TVsSAnZWagAAKhMP/RIvmoY7PovAA9+eIDKg\nHfyF+2Yeas+3j4IN7viK6sMOZ4ZQ8BC4PiCObJ3Ykq+gJjHhPaIiIVcggS3t\nJZqdtYaXouE/ss3oZyw5KFhGPTBNDYBY6nio6p20gkKc3CpnEkVP1ucFLIOw\nIotEDJZAjr+HOXB73gY8AobC4P88LANy15EC2rv5KsghPwgKv9dywuyHiUcj\n53pDv20jtAZgLM2/0hoV6fgk7osgdwd0YWzoDGtoXwwmLENJHTdWfnsOSjT2\nXSb7/a5BYpB2cYjvwNe+xqVguGxZ5pblxsa6nGD5MlEXDfexuukPl1buzEdf\n1UWDOclSSkUH6TiBQoidwNKgbfsKQ6qQFTojfDuQD5razKbjENC8PdYY6QSp\nrAEQLmxZdlRsnq7L02vtK8DLC5bcQEGrbob/0LKFOFE9LrTlD0jZKHn/vbKB\nKGA1s/HL/FjlpuLtBxNqZbEcNk55IcBuQbM3plLpqk0z9RsSk00pG6oakpMl\njzClTIQZ5QkK6gTLj7lEmq+rkE4rDW8uBJPfJOH5gqV9Jj1VZ9BvyVrK6/H2\no5xPNKcT+2gt0vYAJukd2peF0/aMsNCwksZ25jWe86MA8iGlYfTNVvQIMDW8\nVUOhpTllREdSG1jseqKSxxWMLyR/9Gwab2WS/gnRpIqOBuSRdFIKKPRIQTVo\ngdmP\r\n=0MQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz1SN/NZwJYHxzByX9g1bWog82m1G3nIL466obdqcw6wIhAM/xG4pFq6b1SvuI6eSv3xBfPslcC/wwpmI4pE5guUnQ"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.6-rc.2_1553585961289_0.755376173706581"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6-rc.3":{"name":"@wework/react-floormap","version":"1.0.6-rc.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.3-rc.3","@wework/floormap-sdk":"^1.1.7-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"f1147513c217f5ab13f8ddcdb4663b555b8150cb","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.6-rc.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-p2c2SUlHGuh6HoHIBrqvSttiFocPxcbvmcxvT448DcWoAbG8HZwaXi1WNxvlKsswbXD2qBzpoyY3tvlxmhQMrg==","shasum":"6ba20e2a9757f266b9eb4666ff80ce11623f3e26","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.6-rc.3.tgz","fileCount":216,"unpackedSize":1197361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmzUwCRA9TVsSAnZWagAAe/wP/RZ5rBDeSXkZv7c1ouof\nEyH077XcLmw6AmKT5XPbJP6a7s6jrSHTjrCYmzk/EYZt6o6pmUnu1iMUKeLL\nwSpoo3my1dwSJ6bcw89AxYqoNWuZfJnzxL0B5kFbVhLcJnoeV4Z+qt4CsjYl\nluZFyKA//I5Tbd+4lwSAJTMmahA9+4p4SDq2LDBJOyDkuopFJ3k2OgjVVopK\ndDG1riBMb+aHHRviyDPzJnqINnPWXLeWvruzfcanOIJY7B87D5RWWDRAm0ge\n80xkC7lLIhvBjPFkI30huTn6s5i2DUDDYsxHHO+LUromRFzbMzXG83bjY4BR\nEf3ab870GnnyYHjLZS1+8bt9ndrhpAO/Z0QEhDaDWmEdnDTxpUtE8lo5qQm1\n8FVXtPx2eL7YZPUdvQ9sT3Bnfzr3vlLv4ExrcRtGSAb4wsOUd2IgaHkpf3Ib\ns96leIpENUZkfmntPvHMFtDVhVKQM6zncgQt2Y4NMYhg9FU+jWsUyCbzYmo5\nptLKviZS2RA7xwdQ3J7T8LBmkCsORTxkPA/TitEyqsPspc+V0OVz4aCa7E67\nFIL/q5y2kyEhfqG+MRbwMCn31rSP208lEXyO9V2cCEedaCIl4KFF16VSYVkR\nrr2atW1VhPdKGHvCHsxJYVc0tuHHdGbo6Z0I7QuwRCYGHjFsDqW9QIbnowp3\ncWow\r\n=Ncjl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHiwD6leVDsRPVpCAvDu9AvRCRJPJKyfLCZj0FQ78LRMAiBFLO0QFooNx6OQF2krw0njFOhgpigq2iFmAr0+5WMxmA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.6-rc.3_1553675567584_0.3346569169116467"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6":{"name":"@wework/react-floormap","version":"1.0.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.3-rc.3","@wework/floormap-sdk":"^1.1.7-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"ba45b279edbc28211bb35a0128198c5e2df7a58d","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.6","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-ASJKihSY0gs0ZEeXJg+XsIZYaSKs5mKaGuTLYbh3EcJH/n4ZOIZ6flLalPc0NzOYyToJ5olIF/VFO71Nqm77uA==","shasum":"4fedb85b71ef6e03982ee00d1e7ffa5083ce06ea","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.6.tgz","fileCount":216,"unpackedSize":1197356,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnCUFCRA9TVsSAnZWagAAmBcP/jMGPWx7BHN3q4nnSAQZ\nDFEb9GuNfOzcFmHps3ZRF+Hx0RGkA3pDZ5Z44Ru5yKIhubEXKIiF118NwZ2N\nbEYQsrCTI5BMUr+NbeqBQt2orYNNvLhTX7wsTbW0ZWualZBrdqOXwj0YM1GK\n6qbnwEdiEWDDsLI3FyM7gJn3/9W1vay4cFILB46x4E5bmUX4LQZY/LNw3/Ly\nqXFVFEJWM8H3sB7zybemaWgUgB3k+ikuxPcICTeDx2eUysWXdfgcsDkNweC8\nbJZME5dpCgK72fY13deD9WXR8x/02Bfsr4ILX2SjzHgxEOwywDqR4PY7bZAS\nnzSwqPKC4snMDu8nj3DcI+UWkmf4+gDJw05KGQYMgvm414gWFErHLhFHWW2d\nYnJAEKZIXVXhHz6OuJ51y6wGSk/EXbocITa+H0QjNe5Y0DC7OJbCqTe7Hct2\nYW+zXkum25N1UzLjIWjxKhFVU8jKMEgrZV6/1WcoyLHZ/N05jopkO6KelsQ/\n6q4Ug+aCxpJfg8E9KxM5vCFTL8besjjXC6As6D8PzDZaM0kD+JfBKL/sGytD\nzXmxrFWAOUyeU8Z3ub91K0JFNTgeZy2ezNyULmJJxEp+74SezmXIoiga1iYs\nlmtqIsv2jcdtotZKAmwwdfkdRL8PYR+xnCnYR67zo8RdN4sEW3oJ9r0ZSR6l\nuNxs\r\n=cqlP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB0O9FNGKFsTo1s6s+HV1QoxFI4lFj6AmcpXZPz3nr0XAiEApRcVA9db0LcO+dRFPNxyirYIMehhfduUhG/dprj5XQ0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.6_1553736964611_0.06198148547565663"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7-rc1":{"name":"@wework/react-floormap","version":"1.0.7-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.8-rc.1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"e12488748eef40adad4420c4dcb075836fdf2ecb","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.7-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-nc1mbnEhZC/MK6GNFbMgqFM3s+a2MCoQYm2UaCmxsvqWQyIPNOnJ3P26gW8jm0sHQA7Ff1yQ1rjDVSTC8yvHPQ==","shasum":"4f530d1d51a6a77b736264d2f649a1050ec880af","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.7-rc1.tgz","fileCount":216,"unpackedSize":1197360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcnFD8CRA9TVsSAnZWagAAJFwP/3cHCMHIsH5M78YYtfJI\nTR2MOV/Z6DWzPmoFFGR5UcjWWhewzpGRILkfInt8tTMrjMv4NIdLwKlixenW\nsgeVzlHz1RcYbHkGljnOL45qQtA25C++LQ/1TrVazocz9MjG0GqLo+OtQmYO\nuvTzxpCMbxwi3CGH7o6zrSOVQ/P0hlFO6AWBqgiqCLbk+2cPj1FZP1GItNez\nsvyc6ApEWYPYQt+OQ0wDnEGZ1niy75TvZPy0aywz6T3vhuGjBzaWystWqyjg\n4BJzu6DWCPTcSSP8lExPRkP4yCfaLLKej3vwnoWHB1AU8LDvQPPtfYCioK5i\nbknWwyezWVSTRDNvfyaW625e5ciQIY24vYU2XzeQDsi9P0kdENon1xPWVVXI\n+rrYxHRageMRWhps+zVacVV7algwl5BHtx4A8hUv8Xg15xRczMN5O+r+xu2r\nXdS1dsv8bNWgBY3qgO+8OGz7cpx7kSnXPQtmypow9WauZD+GSh57IDaAAF++\nfGmHZ/QC3r6ofbiAOEltA1Udf6RFE3vRtXo7dTVqD2EqtJXEJCHPaol/2cpL\nunc0hPlcShHdxe0vTKQDhpH9WgZDzed/DKX7W332lgKrNEFRCw0QEQeO/WzP\nL4zPnFqN6u8pCTwDi2LPM+wfeIqBDR4b3xNtssS0EehVbiXxyxUx10NoUUWw\nlPf8\r\n=a6PQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+VGWoEIviGhT1bPRN7mWlKehgMvDjbyoDpdq+O1MRagIgVyRX/Lk0rmQkulEf7Z7x9fMMf9WRlQT6TadhlRQBBXQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.7-rc1_1553748219949_0.7581286683800814"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7-rc4":{"name":"@wework/react-floormap","version":"1.0.7-rc4","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.8-rc.2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"94762b5c1b36861f43032d146a670c091e132360","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.7-rc4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-cZC9pwYgJno8lXVpSiMoN41nnXDHGQRwZmfR500G8P0mquE2oc6i15okmXbCRNOqj9+0GVvIr0Uc+jc5Xuk70Q==","shasum":"6191c06fb3a7e410cf9c8bb38432cb8934a7b263","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.7-rc4.tgz","fileCount":216,"unpackedSize":1200993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoyJ5CRA9TVsSAnZWagAAU7EP/08D8wK2iDoPe5Nz2cym\n0bv5WQTguOLj9G49PY8AQrv4r42pT63oSwV4GMFrpGIR97DA4oCo1euI1nbq\nmvyIw8cEq5ZuN28F09DjxZSZ9XlQheCjxYp2kwQHk6eUbOoiPdAAAseCJ8Fw\nIDIMIwO9ejEYhrt8UfgqdLaTRdUJQUE73HWZLHUx86RAV5r2LH+0lpgzW7Bh\nw6xefDZe1vfw+Pp9GhmO3i0y6K776LYXRDcv16qZInAPQ36w/oGUqufooUmq\nRYrb137KR3F63iOn1yWd8jD8eHDMD87Kn1zibxvPSif2+LXSkwZ7/PPrsMql\nxWvnSSIhXVQvYv3Hwvvo7eiinPU+dwahflYN8dTMOYUOBGLYnY4reFufGkGt\nvsZv8c5PB3dJKNyUKxEcQnN39QtSuQ22D6E6wibRZyx239sIqi+ocajiNpZB\nOZri5yvJuKF9vKeMGd03No3YgHDiQpZ3VRoMHi84ZUeO4xpZTcxKdqnjtOM7\nzdDDQxMmsMNBPZ+CFFC474iu4fzbyZJocng5Mz7WLumLln1xZQ8wYt6ix6O+\noqFsRpAEsqiqMSroMuTnaHkVOM2BObhX0p1h8s5X6kaWtUi6AbgyNtkT+N6h\nsZOIUjLlbg/9Dlo0DctLEz7Y1IVy/3i+ZgduTXSzMp2NOVNehpeiCinLbgaN\nIg93\r\n=iHGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA07vsFHUTN7hpEH49rrYi8WiL/qizRmo1lwgQELhNpkAiB3de7Q6P+VsLp0d1umCVik07f+11HH0h3pZHnNZcUdcg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.7-rc4_1554195064620_0.5276651785644395"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7":{"name":"@wework/react-floormap","version":"1.0.7","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.8-rc.2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"2ed33f75119c6bc996d31909ec9df283811d1bfb","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.7","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-XxfH+UJuZ+zs3Gfa+VHB/5Cvb5ITdEBbulKm/xe1LLZO3EI7Quc8skxDr+Um8YyC4Ew+SZKcvNLv9G1z7QqrcQ==","shasum":"5918544cb52010b4e3c2a64f6a9e8d1dbea1fddc","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.7.tgz","fileCount":216,"unpackedSize":1200989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoy0FCRA9TVsSAnZWagAAyOQP/2t11byl7nM0z9/hrUOo\n0H5XDYMylKwKvRqqu/8oe9s5ekFEmFn6KpbaiiPE/fdKao/Yc06Masn1gHAV\nhgAAS24YsOHbfx1JXBL7fI/6XBwfyj8Tez4gmWLGEfFjPldVHHE9jb9i110u\na2T8mTRya5Q85QqbdcX5gb64bt1hJPMVWs85fxUyo512hD/vvZm01pjgkPvQ\n9zJzNOajHdv5Inb9XaKNjmsFOmZns76P3xAk6s41PiHRl8NLh4WHWC8alCD8\n0LHGhCMmvsEJ7Fh5O9iPb7ne+VfJEQWAFrI5sjtSA7+DRGA5pAhJy6RIqEXf\nkhRT5Anq3RMETl3RjWFxBT8DIJ/8KICVvTtzJFzCi+8qmnImpPSEwUwuFvv3\nJ/FEiDIbGRVjpmYpXkri1WyWi+496uFGKAoW1ONxMLFqv/3Ika+qp6ysv4j7\nVJpkFgpv2RepcAsLsMB2chb60QGdKbctiRB6nCl6zjQNv7WmE5PkB/ns2/N3\nx0cwR5dG9lGmlaQWWj6dNd/zpNIMrR2s9sk2+2E44foEc1wVMcPJTnoewIUX\nBRvSluZr7QkFly5TM+oIYVn6tl94/YKyC3tjMN+tCoS5VB36sihf60KyzaYa\naUfX51ZpFhEGqJpZbmTN5fkPbZ4AngN0Sc9ILXkWXP1w/oFNPi1DGhpCRSQM\n8nNk\r\n=c+eR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHAACWIS3EW4bAVzJYHKjrlAC0xvd4Wpf9pdg8hRap+cAiBrDDEBo5nsZ3xKaznVmivwqASbrbV8Pb7RysEsMzA8rg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.7_1554197764472_0.7238813155849271"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.8-rc1":{"name":"@wework/react-floormap","version":"1.0.8-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.9-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"a49fe87311ed8028bb61880e11cdcda91dfda36d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.8-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-EOeY+rPAM6jJiYgzK8yDqHNSf7cNofphokV0d9cMNFuM031llkLx1f+NL3MceG5YfhtIpbXkJiYX4ai+A6j15g==","shasum":"96f07c06e1d6dbc7ab6442e57d331d0d6ad869b6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.8-rc1.tgz","fileCount":216,"unpackedSize":1200992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoznlCRA9TVsSAnZWagAABiIQAI70//VKGSbXSDE+jQEj\norNkizr3VXLPQPfkyUjkS1zAn+pTjZ1r8X/DilgYo5ziLVHXoROd+jEhxmGf\nFcFiMhdGPsySZe3d9CUDWFsThs0a8k2MkNbqWDFQHNco3Si5lk96tqQD/vJa\nYGBD9cj2Bf2TOS0AIEC8lK8omH4cUt/gDj1W+trXMSkXWuwufkviRLC6AR3Y\nQk+qg2D6n9g2iUsO0T9FQMsQCKEDr0/ZcsrOTzKl/HMlhQAcLmM7dydaHu/I\nJkze+shFsZ/qKZ2lVVjgv8fijjX8NawW1u3DdcKESxC0/aTWWz6G/Vv+dHT2\n3lQ4ZRv160OwMFDywJN1DWGYZ1SK3TSXvtwPan8B5xmTcyznAjWdZTOJX1Vs\nFGsJVvwY440/xVQZjP9wPKvOm8vA7iehRUCA+SkblyE1NFBRrTIn+dh9Lhgi\ntXteYv5m3gNOisOagHgN6jPwor+gvCoIZgPmb2WTaFR5K1qZ9fssO07phoQU\niQ59E59cg2XN9lA5e/WeLLTH3ac/KKhMrwoZqru+Tiu/522RPQoF4gKmIP/S\nSVv2CP4es7ZHjw7i15cvRT6lD9DbRNkMCEZDKNShfvlRevgT3oN3GARUqgs4\n4x8wProSnm27kQn3fBp565/nXGMwReJ3S+vFlIz6Xe3SfhdjJAjxEEVgr4qA\njF4f\r\n=J+Ui\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN+Vmedtjk7vwm74gtSJ/j2Am26s6qweYFm/NfYVTwzgIgU5bMeydqfHcslDLzI9expOPvU6fz3Uf4dLFCSqrQg8c="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.8-rc1_1554201060328_0.5886979466961721"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.8":{"name":"@wework/react-floormap","version":"1.0.8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.9-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"407a6b636abe205dc5150fd7b15724769ec81821","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.8","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-C1vdtfiPzaQDli5g1f2gUTVNfTA3Utm7Hu98r2B2gVbrQJ2nEDM4KTVNwBA4qx+Dk+leRxUB4gDUytbEGS6Ndw==","shasum":"443c4d713287d8cea729cff547959dd8cd0f89ff","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.8.tgz","fileCount":216,"unpackedSize":1200988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcozr/CRA9TVsSAnZWagAAWG8P/0dZ3iX6wAq9Vp+G1EOz\nDoz4s6NpaGQ5dkQbRc2wHQtt/86V6R29BY3P14aScNWM9tEGApH2vV0Xg96W\nOQ//UAMQ5tRIT31Sz0rm+0gE7Tiu96dC2FQQ8ABjuGsX4i0JttApaJW8yGxC\nm/9ib4d+QnufB/BkDdKjG04kxx2W4LBUS2GHW9Z31NjHZHiF4izzGEXpdeU8\nnJoDoPxC3vC41o49DSCq+6SR7dkzd6hksVVc6mAVleyQJWjwQc00pg7Q+Bi2\nUg8qqYary+zBp5J06FSlAQ/wNHIc+tTRpRqDBg7x8mmvV9ldWHI9PTymw88/\nc5GrV83P19N9yp0q6ZBo+LSavEzIDNubpWek8e5SirHZ0LWiVRNuyfeaeOce\n+NgX3hC1ZgtqqEfsbccnhxc6SmXFHzcZNgfjaHgR+BRWD9ua5+SzCI203ua4\nXCkDFX61RVKD3QtZerKpgeV1Y6mcDyLnQD808AvhFqdL6wYirgCzoyKq5zXE\n1IwznakwkFzmOXLKfxh1xPN4lL7nWcQLjRan1av+gSfCyKPEQ1tyDasZTYLu\nGpekXtlGN+nuETTJjI8WGIrWWR8IFdyx6HKzpX+iLb0tndqU87Nb1nunGGl8\noopAkErCH1T4Qh2yJWvhxIt9HEz1AQWBjTk4yyIq9XrPkmk1xPOxUkdG0NG8\nfrJf\r\n=eYK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/kCz1dcEm2G+w6UjOJW/oTl7vBMw4aPomk2c0S4+GEAiEAjVCczzpDd2OLBLJ1Tp0pWNqU2hzh6gjMgoO1p15oXm4="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.8_1554201342425_0.769666115129032"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.9-rc1":{"name":"@wework/react-floormap","version":"1.0.9-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.10-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"3ad580397c67e5f57af347ab598393ddd1b2c126","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.9-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-+TWjuCOJK+bLzu9uGAr46qgpONJAeeiTu2B5479+h7N2GJid3eYTLpjvTUXz92HIuCuT/P6ul9oW9tvKE/swqw==","shasum":"9b4212cefd672cbbf9449d55d325a3a93490753c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.9-rc1.tgz","fileCount":216,"unpackedSize":1200999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpeO7CRA9TVsSAnZWagAAWQQQAJdye+Cujf8a9bYh+N0P\n68OWZNd2o8WpkVELcPWduMAvlSZrZS3uQzgwy2A0DmzpN9znm49tajw6NV4u\nV/aeHvwjC6oiGVeQQJL4NdVfak09oIh2f9RPyUxWWnSGHOipHiCGb55EMTqN\nOXw/krcvDIqY+IoNEdIl27kh92rlSZIcHzKhTgTFMqtQQqD8t4j2dhJcBdCr\nJqgT5LNtBQmHTTbAQAAgFXIxDJ/IRj5Ob15njTm/usk4ZklKPgiZ2pc8Mc0d\n2ySiBwo48VAU9Bqlu4OkbQceTrZYVy/1uxfVU4qxP6MYx8TjN8ZJycWGx32w\n6kuJWg7LEKvpKmE0M0tkBiLByZ6W4ypAF70nveAnNuFBBhiAuTI5hSE9zif5\nXEz0JSRAwiQY0cVTVsJ2GEB9TFWvSByEmH1wpzUe7CBjhquIoB7udevhjz2I\n8gq4sZe73ENIc1ZYSTyx0URpJ1TUurTFattXU/EN6MTMTwZjVnbyMCZ/F01Q\nLnH4mw64RDnQJsBjVRouG2Pk7D5kEjaxxtcSEve3X7IO7XPV/Zz+rKqXljOE\nqGli8j0z+Y4oi6WehXdjT3kHNwQ5mq9WKrSvtto/YsgTtTdKXC6xMulxvLOo\nUbTROsrvQS6d8rPfRwMl1DL76qhTPT2ZKVQzQ0A+VSIa9GJ/vrTLFaCkYBvZ\nuE8S\r\n=CZrL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4PGxer9kCyoWrYw1rx4TXly/IbKzMsr5RovLWuS7VAgIgbmVTPzOWLL+nSPcvylke5/3BEN0pNwR2KuL/Zy94qiQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.9-rc1_1554375611103_0.10114513846192841"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.9":{"name":"@wework/react-floormap","version":"1.0.9","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.5-rc1","@wework/floormap-sdk":"^1.1.10-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"fed0fbddd002514d7f872091ba5026ba802c2d60","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.9","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-svZv2Wq+bQiuOL8xbDJBTawBqmDWkTbH1tbCtA4Iw0+ONSwFJzUG+V8MN0PntCWLFROHyNw8qNGswmillBiyIA==","shasum":"dacf6cddd7903ee8268c6c53b5ee0c60effab30f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.9.tgz","fileCount":216,"unpackedSize":1200995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpeQUCRA9TVsSAnZWagAAPv8QAJJD0GMvpBSKlLb2VObY\nMuAM37JQSboZu/ec8DuiamTqbl3jUGHj8yKsc92dL/k3mtIihjqTXo33S+rO\nfznIop5cJlP+S7g0QMClT1xYsC4mlp0awVUfDbzvH7PJMIuYRyXYH5JTaRzF\n8tBPMA1Q1lZJN8u0rCo8KH4VzLgf/iAU6yc41eTbf5dqVJ2XqGNtKH3Uu2Tg\nANd3pSSdLPBcOCidl2Kt20tgnK4mBoV4kjZXgSfoiuRAWXitADVaIsMo4vKc\nmAF7XpgX8posqbU3TIMgqGtMe7EXBNLjligQP56+ZfUXmLEpUDInnVxrAY/R\n4jXV07A8HKyz+AGLB5JyitAd0tNCWeO/zcQHU736npJraLSBLAfA/wev10pe\nAnTdx8ZwdYmNHZfYeg+tuKCyAuKBl9tA2rURGyvEDPIECCYVgFpE6FQjVffK\nr3gYE0ejRNqX2Qypqc8id2arPGVCesf9jqdx3lUkUR7EHJbkR6fJjJ6B5Wty\nuzkSv0zf7NJ0vNVYFwI8vjwebxyOczinuQyB8Iy2PwJf0T6JyRdzncZJFZfN\nwG/Dc8KqD7bNyfXrTWArdYRhwQqh3pIVjcjitNveU7n96spIG6QZ9vFJyjHJ\nnqc7tZKeGmSmJoHpyMZHW/hy/49S4VegnD/FwmD6EYCbXKsv8TmsFJaxWGMi\nBTuS\r\n=tPH2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALluZvWKmkQGPexYx7Hin/5yJg+70uk/+puJ7Ce5CorAiEAna3BVd5y1k05NwqV+om+uSp11IGyBK2qQltANshTNhs="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.9_1554375699966_0.1672992869248724"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc1":{"name":"@wework/react-floormap","version":"1.1.0-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.6-rc1","@wework/floormap-sdk":"^1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"dccc3b4c45f21d856aadb8465c79e7bcf74322f6","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-BWNpmL08BPjGpOL4Z1wr5d6YEVdi8OTKrbrAO1X32SIMFcX5gJQu+amZ5QoO15fSoAvHgHoIiIq5JyCbrKtkyA==","shasum":"400f847633a51d546185364b3642c35677b33da6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc1.tgz","fileCount":252,"unpackedSize":1467062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpyypCRA9TVsSAnZWagAA8oAP/3NaQMRleff5+P1h5MSd\nGmVEte0sk+bpm/wxerQ/WhgOiFhE/Hsqc/0qEMbw2S1zELmF6ckQsVHWaZhU\nUwKAWOgRUwLr7Tnyv9TD+rp4PZdJp4yp6B4Kyw6V+LoQ/BGPuhNBUVbpHDgj\nacZ4Wz9sxs9gCBJ8fiPOTzFpIXPubXPWIk9Qu2MsL2X2hETRcovqKaEQYgFb\noWKBLci1WRJo8YictQ5oruj0myVal9P6U4lvNKFAByds6pbjI8J/iMbHdaRK\nHnmNVoyP5Pg8xjXyvhjQg4mv10ZpdtKbfX+DQW/3wXCgMA5RwnmdbQgEqVIE\ntgf83pRddZCvIxBOpksaqgTcQzH6uZKRt4Eyu/ADpx/PPWywCjLsAW0m5ZR0\nkdc/xGCLi/LYsqdP/8PZq8jz0eawcx5e+Hvj4FUFiRg1tgQUfwmVIC2IsBdQ\nf+PESZ49D0dt/ES2+dqRULrdis0H0SIZxFwr64BM6Bib5OrIBy1uZ3jSF4H3\nHjvvSmSfyCsTIjdu/128QIkt4RpxkyTnKLI0+rMM19uzd4CX+v6cZXZTAZCE\n5PMUEtzcfCBOu3vaKnoM0wXklbEFp3/HLRfG7aesngprEJ5uK4xbxWhuvx1u\nEBB7TXlxyrUwD+i98Dq1HUw9J6cWXcrvGJfkzAzwYUY2/z+Udnk79Z9Or7TQ\niRSd\r\n=MlnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNMqc24uratIXpHACBIlrVhPSG/5kOxMzLS81Luy+qTwIhAM4mFBHGzeQv7+rUVCecGlmdb1IQahJkI11EviXvF69P"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc1_1554459816217_0.3115202722578152"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc2":{"name":"@wework/react-floormap","version":"1.1.0-rc2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.6-rc1","@wework/floormap-sdk":"^1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"2373a3a101cad91968431b04b54fdcc461f32511","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-cUvmK/ynojLYpO0VqeEWyOLjukbpTxvEhdmyTqmItReRrsAjNTFeju+6wV0Mk6k4i0KAtPwZCT/tZfi2RrCNrg==","shasum":"84f135438524e82dbd96af91828934a61111e05f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc2.tgz","fileCount":258,"unpackedSize":1488291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqqhsCRA9TVsSAnZWagAAVyYP/RFd4hW5mQbzItBiSbJu\nxeHMJMfxtw+nXmXMqUPBYEJvxfJevuAyyUTtDGkinTS9/RZL4Cn3t0n3g9nY\nz45MUchM6QPLrI+zf1LFT7FiOXUYh4/njZMRc7hA5WH2J7A/11sl6znzgk5P\nIBkIbtgAK7FWSjU523I05JtDu5gDwtNHLOxIJtFOZk4Q/lAT7txmSum95rOu\nYZUTq5TBxyx/b1W/DWpSBNjfdV+EvRFTpwZ9/fpvb6pZeVkg5HNfYxacpIWR\n4reP31sgC+++sKn34YJrAFs71O+B4tOu+DcZxkMAq7oPa8cNcCBgMHjJLOmP\nBwj0NrsWVu5C+RcrlOgxtWukdhU/Ytm/NIRKaV8veoS4+eDyV4u8HBIlTQTt\nN2eSGhEmGSKBKvsc8P0R/o+Ts761q45g5iDrp3s6E0H4zq01sGisOZ3GptSH\nCr6YNUPWgSl7MbxRdm07ywoA+p9jfN8dTAxBL/KcaL0avtV426WVJkVoG2XX\n7URzU/k91Pw4kuBanqt04Ins8D0rLKyuog4vieEj2aoUPnRemyp7ZOaAlwgt\nIflBnEt/TKmE4/WZ0fvPHDnt8wcXmVC6LKf/g0V6PPegO3PCvXmag2buAYyI\nxcC1ho/kb74fJCjYesEw5ZOk+jTNSmgQan/aQQLZPYJCIQvYXFwJKj54naKf\nWxFa\r\n=t3sL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCl7BTXq8R18jCVOZvG1iT7S0lIB9o1EcLtEjF2AQtvPQIhAMVnP9XJqVRH3utOPIfBKlXr81q5C4j7lFd7JX5rWYcG"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc2_1554688106642_0.6019643419486655"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc3":{"name":"@wework/react-floormap","version":"1.1.0-rc3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.6-rc1","@wework/floormap-sdk":"^1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"acc2b3b0c04cb05f221dfe112d17642e855e87c8","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-HlfZZ5lI7eDK9pF2OQNMxplOnVF/oXQgTqyFRf62IEsq2PrKMHKDGQo6ZRNcJMRMtrasMrxzUtJEB+Irlugb2A==","shasum":"1bdf2d477b2da81d2859ae6ddb03a491b8c63d21","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc3.tgz","fileCount":258,"unpackedSize":1489265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqrPbCRA9TVsSAnZWagAA790QAJtH4oNKEKC/dqNarN9y\nMNzYvtGmvcF1wKkk22ivGk7vR+E32jYKGH2qA0ZtZ4pI7InPtnFglOC7Gjat\ng+qvX+VdpaXXMVtMvLlGpbtr4J5eAStOabLhkPzRbiiC9Yp0ek6n2nWkyfgA\nj9tMPEhTL17TJsqP4sAeo09tweT1PJoglrWFBeOsfbAFobnxapi4K7KnfAKH\ndCel0JGBZ6pfMltCt+c7zrlTTMLYSBYuHqrHkIp+4JqcDqLS+WDbh4PhHLlB\nN5L9VPjw/kK4MIrYGXEkXZlRc/siwifG+mj6FjpCDfws0PPlRfTqRN1TeOAL\nK40eGPpnFeiL8HbsIy5oFh3jCgREC/wHcFBe7M54OmY+5N4Q/3AMF0wXnmtl\njx72GuMEjdIB1yZ+AgC+HH7yI49vEJYYZMRDKee1e8FrLgnMLxIMikpCW1FB\nZDGHjMEjDFKMzkFKmumPCuyYYLMxpKcI29JGcSqzHJEzL+XSeppSzNxQqTeR\nysAjSvmo0mjAvWticjeueVWEm/c6nSrdM2br2qzBlG7DPU/2apUMJLcrOzQ4\n+rh4Ws6LNHFrygIRT69d8IDV/wm6Ti/kbtHqPjhgWBfOu/M18GKiS9dzZHlO\no5tC/j6mx2o7TTLvbDqEaMYsBobwJmjAwQeQNItfvJR+9BJvwnnsfqGUQzbl\nzNbi\r\n=qKUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+AnYi3B+rhBIbYQHWZBYdWMek/lHfIAo295qqyuXHIAiAEN+ZJSXFnnqcUw0MfYRiOD65mZBBtkzv5JNX74fsVUg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc3_1554691034645_0.8231943653308547"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc4":{"name":"@wework/react-floormap","version":"1.1.0-rc4","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.6-rc1","@wework/floormap-sdk":"^1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"add0eea74ae098f46a87e5fd673b2d607063781d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-60n9z2SOV1CMpjkRkc+q8Heg5h7E3xnUjYAzZfnDo5p30utFf6R4SS9AL3uo3gsOweAI98XOP+fZm2SkHjZyyQ==","shasum":"f2964fdf26d5bbb385d2ee53f03b49c4f104b99d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc4.tgz","fileCount":258,"unpackedSize":1490340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqsfVCRA9TVsSAnZWagAAq/cP/Az4FCJW6SABYsjKGIYH\neVYqRXZz4lb9SwCSnrFv3dcZ171XPrCZj7ItIqPeobpLRKUSUWGZkaqjxbhj\nArVuK04HuOoUtT8S9jwIKfwqUwdLCfhV88LOhv0bTpEK7D73VhUA69Jru18y\ns/VD+SRBeqvaUN1UxZZn99H+Lo1HbFqhmvGUU5saIKTWgcQZbOx+Bl5VwYRo\nexTcaArya8oyEwB0RdF3KF99VozuedjphK+UVOxsZdYRvPv5G0TFIOEffjoU\nEcF/BM3HyK4pbXX+o4hE8n0I0ahArn9/nWTTQcYJeraBD9jT1UuIRDaDjHax\nbiUpQv32U+nwwofaRF4w73xs6eHNOtHGHIw5s3byWVNSivwF4XA7tJn7IrTi\n7bmc4elvlue864IxOPbMwVSXuRHf38G85LGl4Z31o/zcY93dNk2BGFxGwEjp\n+mhOVbAMGJmhiapdhb8T51pTbk5wtA+hf8OGYQU8imHDRTpUEdLMB/pQh81y\nj7hnK4j/I8TWI1DbI7JcppkUM5La4NKASjsjUaFL8ONsyGqIhdz9OH1q9lXr\nd4a7XiyprL5+mWZ19D32Yhx0+uHYdtY5s5w1SQ5ye23tbjNCUwVTeNhi2+bI\nqL7aYfeYakjEr/3ElnGtYfbI8tFcnc6z6O0NETem7rkU9g7U+px7t+u3ZfSD\nlKVj\r\n=K3c7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANT8zsE0vXU2ID+WdpolyPg1AkYnkeEv4Zi2KZ4DWZWAiEAzhxQEuw1MlwGR5MgwCUCjMYRWubHi6fFb0klJKAWTLQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc4_1554696148753_0.8556212722682808"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc5":{"name":"@wework/react-floormap","version":"1.1.0-rc5","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.6-rc1","@wework/floormap-sdk":"^1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"f7ea59c7a3b5648761d0bc5acaccc6c8b0df0f99","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc5","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-UrwBosgfyFJXZKC8BhqwNouCKtTzpLzAxditzrssA6wt73EsJT3+MeJQoGBEj/pOXFwaCv7vQyToPw9gZ86b8A==","shasum":"ac203dd6633b58acd0fa6aa2a2fcdec075c1eaee","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc5.tgz","fileCount":258,"unpackedSize":1491276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqvtPCRA9TVsSAnZWagAAsx8P/3pM0rHDUNrbCOWmWUy3\nDhd1FdGtJR2XPcNjrYntaQ55s6oG9UVSPVfc1ql2SdkEPVBWCas74zxlbgO2\ncwrFmwmtivzVtl6Tz6c5YXOl1QLHJ7jRaLdD1YC/wDdfZSubwu0dM/nHSHYz\n45W4Ku0kmWxMNXkh4jQtMJhbGL0ec36uKKyFqRsuBMHMQErfZK5VlrMlUjWs\nsKeWvy3ibTIhTMML52dG/jKa+CKMYMv8ZKsJO1/UyXIkTd3/USjKQU3xajuF\nPqHY0QXyVvqBUqixv1msmozs05EceqgzxK30LLw4Ir0/PnkQ1yV8D5G6lC5T\ndmQ49NvBkuDIheBkD+m7vhl8y0XqGZR52hlkZX3B4zZKibw59QhHXP6vIFVG\nqxfCcS3Jn76uCZPSlcrsnaunlfW9rkZDArzrU5P4z0fCbZYUcKpO9Ea/1kto\nr5gf8/UI+AGrUEO2cU0b4BgJf91jzQQr4oiV14XN8Xhhhzod1T+Tfo5rfj5D\nyBIhWQxEpBPg2PUSuJpt7czKpllh2a63EcN6dSfT5gGqhJxrGPPorFofuROf\nTeac0KKtVCAeJQi1tctIrrriiUXncJEr2xJgiJR4m8xrY7KHBrhMOtr/VZXQ\n2onCUEtdOecasItnKHJVoHI4OoaJ18WiKw7E4p21s3gpGm1dmhd9XdZroeqj\nXk6R\r\n=HgLV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHm7jdFVJfurIJL7Cm5GpEmnk3bK+F/lcgwAEV8dO1Z7AiEA+lK99p2HDJ2/D9KQu0egSP9AteYPdWLrQhbTZJNslz0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc5_1554709326995_0.9772353059199606"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc6":{"name":"@wework/react-floormap","version":"1.1.0-rc6","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.6-rc1","@wework/floormap-sdk":"^1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"97d56428899b9908a71ccd7c81ee0936da97535c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc6","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-6y+XdkBYF1kBXcHgOanIT2r1A11YttHtaPU5UBSl7xtxTQ8YBtkJ2Ahxw5TfgFKHk5HejMdQ65uFifqQcjx9zQ==","shasum":"695eff5222a853a627ef64df9ea9b74efed96e22","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc6.tgz","fileCount":258,"unpackedSize":1491854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqwzqCRA9TVsSAnZWagAAVV8P/2YKj85HBwR2nlnz73sN\n4XCt37ZXvKIVrwXAm61M9NX8legsylugN6pGoqjFDsK4Z47LtCuztsnSrgrW\nJKDle13OhyVZXck3GtvcIg7OfZUrq2mbexGNVcZs3Q6W3DwPWBcekhOaS5sA\nzgpbMqA89bdbUegsBHx2W+QczgOUzJ6A91w8U3LTWiTP17OEzDtdH/s/T+2s\n7bEQ2YEKtmz7GFXp6c4Nj8QTDqW1of0tlApV3GkgA6L/ujkcrsZPrY816B54\nQQpqEU0ao0Iejn2B1O210iA3v7VE0WCA+D9idWKDwG9jUwLUygFa+NNMuffK\nNn/vJ9OLAIY8s3itm/HJ1QtgUNYFr1kjopExSK3TESPTOPUDUyZHuRrCm9td\n+xefDu3Y8vec7GSK+wWHJjg6W8jdKqnHo2ELLLhFbxojLQglLMP34PcRnSW6\nfdVmnM7U0YqqA+JU9BbZCGKVantoTem5H/rqpGUNKqxOJkmHMZyP6UNPd2D/\naTNaCP6nS1hzowov8F+c0jzJ2lyLHyaRsvmsx26TKdufs6Xg9+7j+mUzqGlQ\nvj4pjdC4Utzd71IolK25H2BSD/EmbJcSRGq8XwB3JgMsdjyInGulIN9Sab9v\ndSrBv+WR3eKNkhsoXIbmBwaKaITwIKLgD7kygLg7EoQNQ0mm/5oRuaDiyv6F\nJVlj\r\n=fA3u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPnDs6XP0mV3DA5p8JP6S80Ry5K3zCZI4Ms6nM/F/dsAiAYKZNHwsM7y3op7IqcxAGzCENqWDdKywQJ40b8Bv4qbw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc6_1554713833495_0.129529023838993"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc8":{"name":"@wework/react-floormap","version":"1.1.0-rc8","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.7-rc1","@wework/floormap-sdk":"^1.1.12-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"1c548067fc5ba9163c9c244d108aea89ae983865","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc8","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-HdZ9QSSRe4VXCulmGFBztOUNAPpi1ruBTVprHEGbNRWbXwvnklVgbe4gzLl/HLYuD9axfBqD1wA/iW2YYIsRaQ==","shasum":"8697a11b8709d6a6094977f57ab98a203010ceb3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc8.tgz","fileCount":258,"unpackedSize":1491924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqx8yCRA9TVsSAnZWagAAkgEP/irgh8o7gI1MWqG392FH\nO1FoJUxgQ/9l1aJ/h5NbeYk1lde8sStgy2FXu0okkcZ49HsO6l7RlF23bKvu\nk9Qf07WMZW9uRZo4+wPc63gXh4eUUQZ+der0lqtHqYHV8Ih1H6By8nwbEnnJ\n+j1HmO4OE6qGP9uy6ouU5jRTB+si5QN+0hbvrBJVR2WL666xcG/vXoOByinP\n6SXHBQyjoG0dtRM5kN0HOWBMh0JKkcBIDyGS+irPfOkDHUMSRFLSI2gfwHxr\nX3VsBoQdSYffT7Ko54FWlVnNEWQDlgzJ3fk7UKuePJkx8BjvhOWE9sneerku\nzNAzxfxS+RdgvvetRPI+net2u2Odcu3PHDFAlmJcRlkg5l4/AWmYScnO/L4O\nEVydrOeQCJgSbxpqTsB4P32ZQ3UiBdOjmc9Mmq6JvXbi9l5BRyhFxHgqi6rL\npwmGDv44VVWYB5TsKychtxV63Dn/BGgUibeM0NbvbUMSA311fAuLq3h7UjX6\nBPphOaSw2IvkRyyTaWNKSH5uKyzxptJ4Qw2BKKtEFXvBSZexIZ23SbYkzYGr\nmjLGF3rrPxP9wKH3kjLTw0HkNx3cyIk95y7kE+ycJbgYMiTCMaLtbWdlaEWi\ne+BLqLmAmJRftpdXcuaa+7YajBSeFGUY4bufngqToagZwKOCAit5SpaL1OjM\nZRy5\r\n=GIdt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2t8Wwb8md8QOFiV40QKvuO8eLtJePGz/PsxdyLq808AiAHO+3M0oAkp8i7GYn8bwzHT5jttb1slSpk1RpLdnV1jg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc8_1554718513348_0.6346421399385718"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc9":{"name":"@wework/react-floormap","version":"1.1.0-rc9","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.7-1.rc1","@wework/floormap-sdk":"^1.1.12-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"7.2.10","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"603c9ee67ccc09e0fb317ca96ecfbcd0b5f1246c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc9","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-RD/w/u1wZG9c0p/M9K/AWl0pEjVKqYX8PDcLazQuRA9h5pJ/z9KT5B9bVnsZgG5uPvFvrZ5j2yFaUiCnmcfByw==","shasum":"08e1fbda4118f3283d416ce6863cae0189e55348","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc9.tgz","fileCount":258,"unpackedSize":1491926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqyHBCRA9TVsSAnZWagAAYHEP/3jCrYdcHa2F43sZF81g\nqdtBjIVmiEVhytpdjK+V9AYF/R1paCZviqdbBe7qPNBL1yAN4gCUWJ7URXki\ng5pMFo4srGd1IsNFU2aHbuJxwu1IqZTqqtPieVbsX0FLWS+5UnG8Ph2bm/x4\n5HimVjN3/OlWn0L0qvvFyAlnU0+dDjZ69zJXBvCLmhN/CyASIbmL55i799Cj\nbOvgqwkBj0niS1Z3xLxz1/M0kW+jANycLPRjnLlTFN0Ax6hmX88wW65mxt9Q\nb/ufs27gfTxoWENEoIZKYFdYg4pIBp94fjtq5t71FAEqcDNLPJBgpRQ0+/UF\nGGwOWbxV2wIksS7jlKHuJ8gvq7fzx5lNTIp8ihMZNnh9QXnPpAjLpHcNleDR\nAKvJyM/HhMkfaezkEUo05A6k/ZbSngD3GRhzJDf9312pjjWRXj+O6wFifoG1\nNLfGY4D+6bop8qfgIsHZK+PL6YHHpX2b4IBXuuv4s8PtykiQOMvR9T1MnigR\nFkq8bhTopdgPz+jJafiGDLRSvC+Ja8ZIMHntK413eQaGezJt1gZYq0c3WjlA\nibX8G5Zh6pgHw2QUSR86Gge5wo1Ku1SAN0ZdxM2xe/xfB73fVRUlg1qWlurm\nZjT2ehDGcMBbUMfvVQMbs+QzOIHruBrPRrPzA4rjQ9Z/Hv1a3Egp/vTd+IAC\nFrjD\r\n=zDwL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbIDdXhBAukSX9zd/FUEgBZ1FLBeciaG+UpgqYySOiBQIhANJOQSj/nh2ggWXQqnFv591G40/XPqGIK6hYTBr18UF9"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc9_1554719168474_0.032820858986783774"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-dev1":{"name":"@wework/react-floormap","version":"1.1.0-dev1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.5","@wework/floormap-sdk":"1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"cab9c7dfe8ff7237f27456459ac42060e224f518","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-dev1","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-nLdP8XwwuOauN3IT4aIlgppHybizCB8Jmhf1J+BXjKnf1H14LOCOjTVPvzUsqe9S7GsVgXElZTiRtAbWJ28JEA==","shasum":"c83bd2d3e0e76168bce7cbc85aad7dd6e240555d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-dev1.tgz","fileCount":258,"unpackedSize":1491920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq2/iCRA9TVsSAnZWagAA3t8P/ilZVMj54HPbLxJeYKFO\nILtr9t6fVFNWMPJqp1p8cz0mgx/NCjR1v7YzMqT27BQx4e7yN+C1ruEue4eL\nq91PQs+04oAt1cz5HtJ9RGNhtdclzdXMYYw74TxJEvQVIWGStZHZ3VvkTwYF\nzrnp4VoTNpgnrmzbDFS6zyf9rpJrQF/9KN6HARvvMeuHDUGJ1+yBDRFZ7ifF\ntpCyiBcTDASKUvoSaaNPfxlSp6OQGzF47glQCemUZolOPBJE7DOmMkeM1mys\nbfwmuN/kBAq0Zo+Xu9c1eazEATUn8N31Hw1FhmMyz/PGhYW8itLkgfXlMNtP\n3A4EfaRY+kvIMsr9kPwJ24gGu5qp2acBjKvH2vfkpOMh6cwIQR+Ux/F+u1rN\n6mhv1HEqvs2EPDHGF064gizlOXDJy6dWsji9g4IOoIQzJe6dnJgUnPqlws0Z\nqlO7JX3jwuAJKCwiyR2T6jgw94SLHlaeVOXhYNGWlz0bLokIJ7Pln9UXNrar\n9DMDJX8dc9suKvdUPP4PxyBJPSIjNMnRvn0IWP2UUFTDDR1D3xxWsUB8Ka1o\n4Yxe3ohDa7xMD5sqr6uSSu+o6RepnSWtXvxK1SBdLKNdDSyv7HadU7lb1Eza\nXfvosegW741PHoUM5YCCwitpWArzofNgJDFwSDSibOGlGLLAdR/+GstwgUFQ\nftYx\r\n=Jac/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALqBu6r0rd3Par7EoxD6LVdHiNseKaPMNkKUuMCzWH/AiAYdYyApRk5tH+7cFlfKoofB8uB8+v/UaFCMZE8ofqoaQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-dev1_1554739169179_0.1940434884590898"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-dev2":{"name":"@wework/react-floormap","version":"1.1.0-dev2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.5","@wework/floormap-sdk":"1.1.11-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"55b5f43c25e807344bcb0ea68d82640203d44b51","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-dev2","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-BPAeW6xaXXR+yKvpfA9ODR625LnZUH0+1iSgI7+DYDPOZ+o/qDvIQ80XincBInFGQxQeRxfGXnFES8QZtt+usw==","shasum":"ee5a178255b9e2c2ca0b033ccb8801073a4afef5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-dev2.tgz","fileCount":258,"unpackedSize":1492009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq3JcCRA9TVsSAnZWagAA3tIP/RThcZ7dyat0aApA+8WH\nG+0Oq6sZ5E1cAgJDhJS7c+gmYo9psDjO5KM4OuOhT6wmdIGY3CdB2l9OCsfd\n2tPMqN8FLp8ik/DMXOJ8ubmBGVjWStUskM1yOczXtuJdP611iMjDRW72NaHS\n0u68hSN9JbD+ddTsnFgnHqjMsgnQDdiMMd6sqgeWbTszhzs0aI+FCnD5K/Wt\nCEf+2Kau8r6dWcB7U751DEBfr5c+qLfmpsAGah4cyQVImOPZR2Q/p+xxC/ci\n/DO4PMyqAG0a+S19+xRkrgKpSxcvqpeutVuVoPD/RcU7lHEyzT+38u8ZNm/9\nadGVO94KuOaZVRQVVoGCn/Vp4Q4MCypR7UdVS/WGorvdnzbGCJ8MEr4K57qB\nDBxO3vEK+9RGXFwaWiO+YORavEBWG1sYr0pMnsCwys44UZWbM2+DJ7FyzQdf\nUnDG/mZjQecJ5l+kBYvZnOEz1mES1kq5lY91JkiczwYzAF9Z0f/68rwu7VBc\nuzfNEI1Yp2lIqB6jHKbQRcfB5p3iuXO1kSgI1Yao0faYGBIXpUyEIWp9ldku\nZZiguTXItHnD3blxZzZuV4+dGRxBrusiF1vdA+zLoHbHw/Lx6w597b3mYzNK\nGzHuOZZjDV20JtaxYgV5HR01j4HzF1DjKDbZOnQbVM7+9DdQ9qWjG3Hy/GZz\n6g7+\r\n=9P4P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxdck7RHQquogEZHw5rbqjhd7E6CNVodk0nk42izFW4QIhALOQnu+uHsCFHSe8L6dkjoAokdHnCDJf2IyokzB7zL/M"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-dev2_1554739803980_0.8147698081430426"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-dev3":{"name":"@wework/react-floormap","version":"1.1.0-dev3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.12","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"ba9d2c9935e0b5b8d20f9fc1f2d56bd9977b9b3b","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-dev3","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-WN5eD9/wFXQR29Vdr3lH4mOzbeWVdc0gVy9DIQwERxi9AmR9mLzvNjwGgQaYUtnC1AjhVOFs75iWbEdF0zsliw==","shasum":"f942f81e1b17b08a29a2053296b93786a4fa558a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-dev3.tgz","fileCount":258,"unpackedSize":1492007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq3MxCRA9TVsSAnZWagAAfEsQAJ9bWGI7uQUyA5JFeJJp\npfMLJjH70OTn/NA+WW3yLoYkFfDKQjrYjV5aRag19XA3NI8NL6gnAYESbewH\n8veAZzBS3E9iH3RqCLEtqfIVzTsW/tz4a7QuXx9Hg1LHMJvYxL+gebHS1pN+\n/bMNWxknusJxwnQvE6YNzMmSGnNp6EI/RaXYy8K+r/l+4mx+ZNJlfLwxCbv6\nfOxQ+4cRuwNi9N5vl7a+CGggCwMGB8GdTDlT0iwi+qZjIUn66tKM67NAvLZu\nv0kyUgleDtbXQ1UJJBUWYMZbjxvIX9LtylE3OAh3JxYb4QQKjF3UtBDBCR3c\nJPWiE2DszuqRN/rMRNZiNt5gvyrBBGnVidSKtX6fJzz3Alo+p4NphdEKB7PA\nq4BEWUZqo1qyPkK6ryZxe7k/CBEHFeI/XIRsyjLFj6vzx7Q/WfiTKJBEHMiv\n8i+42/iKIer7hOxwqFfu0pRUxCto8ez6z15g5RbHuTZKpf65Un0cI0+fYllC\netmuCjqMr34Hre1HBzYdEXvz6/FfkjVL4cpO9Y9ip6u9eNm9OJ0WWJQUhyaS\ngZAg05lPT/iwaV3eeiuUWKusubf+D3l6NqS0MtfiD0qENM9VrguPdScaevvI\nPohW2yVcoj9z99noOe3dfqnsV29la5AfHbo9nAfk0euwrLdaugmPL3ViQazy\nxKeC\r\n=IAey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBKavRrqgUuSpCnEiQkK76WaExonhkZMDvfGJaf7FMXBAiEA2n6Qwm0ir21t3elaf2PauWioJJBlZWETq3ETMsw8FJo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-dev3_1554740016678_0.7459541825750944"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-dev4":{"name":"@wework/react-floormap","version":"1.1.0-dev4","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.12","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"432547073222991fda666e170ddcfc0bdb859a0b","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-dev4","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-yQU7MxDeGsDn91MOOi6YOOkNrBVRksG41zidmLFhhyhwNtenPrglrkOZSqh9dJcueq3stCo5Jfa+DorFAuFFrQ==","shasum":"4212785096cb0a8b57ec9ce4617e45422775974f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-dev4.tgz","fileCount":258,"unpackedSize":1491895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq3XhCRA9TVsSAnZWagAALuoP/0M057XjvqLABx4wWUXU\nLm4qQ1DD79MULyWrGWoesQAqzEityxQXC5yApHizJEskwo38Zw2wQd2AoSJi\nKDzJKWVDVHLl36aAlGsqUZ/ff3fUy09dqjB8GgtZAXcqELQK/8SKIyLX45kh\nd62GsIc2T/k08zJ8N/sOWDMfS+fF9+zj7/H6pbT3L9Kf1ApA/C3A4vkM4aZT\nP1p4PRzDpjF2skNxW4VFQs3W8Zaygh1SCddwU+KUPYQMnXsBShiBBwwfO19k\n9qtJ8bKr+0Int3pCDCEjM73tiBZwpxJbKbDVXWednlwM1da/+WLPRShSmcdn\nf4IFn1oPOoVK/SzA5rIRXLcSFYJrA4rw1s/XscC17XYfn7/FYuWZUgxLoz63\nnJ5hzDl+SIZPFCF6C3AkhyOskifCGJJ8srlR9dxU6a+QsaEE9Vm825JFSHaG\nOemgy2i2WFunVo2hAyRbE23xOqdZWsH99MR10GTefZmvIHreDMSPnRuPbW9t\ndRqRWN/KTJ/PkqE1NZ2TBGt8a95A5rDqxAXz22RIGmGyVw3A/RxKdl+wlZ0g\ntkSPnZOMLqZZebaTY8oD+wXbJrBpcHp3eISmNGLCHnXJT7ng8bDZjtNg2rph\nUDZcT1vx0hDa0DLqThaCEb6+ZblzR9H/8fNRESHLv/nMX7B7+Iq6H+b3i74N\nbS7F\r\n=595C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHN/doyaaDt5UnkYhMWLoSc7Kjn+A3ZtfcBaVmViFsBQIgRH+FJOU9JAbnUlHi/vcBSXoiH4Nmzge9cvFuKoE+uEk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-dev4_1554740704863_0.8047915372171861"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.10-dev1":{"name":"@wework/react-floormap","version":"1.0.10-dev1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.5","@wework/floormap-sdk":"1.1.9","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"a51a026267c651e5de568d47b9fe3321fe77bd62","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.10-dev1","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-b15MgBzFBabPlFGioLt5cKDdjHojeR3jvyXo+XXfjISRHyIfWOCdOXMTry75YGxjG35Zyxeugdnu/ZYCnuwmiA==","shasum":"2a75d13e10f58e9912d0cb579bd40950444d6465","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.10-dev1.tgz","fileCount":216,"unpackedSize":1201077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq3u/CRA9TVsSAnZWagAAS/YP/1juyiS5P97NyHCRe88b\nVz/36f+BEzxDxmV0NgeTLogwuEg1G+qW47oDbTXesJSbzssc88GctgazY3FH\nwHPBNSa/2i2DTkS2z4FzAkj/nt7eA7ImnnEh9v1mTsoJ6itqP9ad7wD1CA5C\nBvS16v1W404FrB5krjo3JkYC0sTD8UOeafBjmIt2+KNjdmzcshR/6AOuH+mU\nSOrKGfo+xBms/qk10BGYeFaHkrzNhnJXAmZazy4dyQHB3vFMrTQI24DDl05u\nF7AgivFIDn1KlQjM3VEd2tVFDzfHEaIo7cjRqSuiA7aD0NdCHtwo3PEW+tFP\nrfZCFrFaYOjlkWMYoh07oWrCKCFhAdjJaeHxr8+Y+cfe7EC26ZPfwzn5eEoV\nBuXOrf1YlKeCT0anZcc2KIPHc7l0fbm1HCwtQF7WMzuriSRPDCKwR7Si/ENU\njCgZP/9WsJhiz1O8BCM9B2rey6EEki4WB+CMNUAvXrk2H32Pb6ksSQ5258tV\ncx3DqbBRyhypKB+87+4kSzfCMptp+eFX3s927DcULMYAyDhFgLLOC+hz2Kqz\n3Jv58LLk20v0h4OT7oxr2TGZoIV6uBhTo3o/KqHdKMGKyC5/Xyxtqpye+cC0\n1yZTy+iiUGWZBgfDNYD1C815oHhvDt3uFJqk0t7n9aWJ1P2tX6BqRXMP4e7r\nI17Z\r\n=ONSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYoNKGwJ6uAtGK8T3cXw6xP7NRKsS+fHsyCyHYNc2jHAIgdNXGoyR4PzjMBdHKpJaQ4/ak3ZDkW/kAi3Xhrf35Gvo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.10-dev1_1554742206239_0.7803265758654077"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.10-dev5":{"name":"@wework/react-floormap","version":"1.0.10-dev5","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.5","@wework/floormap-sdk":"1.1.9","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"3b16b1eea3ed8ae541b817dd8e540bb01b6d3cc0","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.10-dev5","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-iPpt/oikieNf0064FZO8Z8V6nqDerPV/BL5fbUEUDFPxDlRPW8pC9ucbx5Ijq5+M/BmVvs/0jDKDZmRsfWg8Mw==","shasum":"c53ace9fd9b45b0f2f24e2fc3766f69e51cc76b1","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.10-dev5.tgz","fileCount":216,"unpackedSize":1201997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq/a6CRA9TVsSAnZWagAAx/gQAItjb++PngX3H7pvTowf\nh2u/F5H7OwVoz3ItKeY5K2LgOFmF8cmzVLQiWy2yrC8/6XQzXF94Lye+Z7MA\ncURt0jcC7imU1QhJXLSvPflY7Ooyvwk4BVe+CIAon3GnrYyAqqP4MBJVDx+X\ntq3zCxZCt01KDSGody7Q4WKxFmGTNbhw+d0KmZyzh4X8tg2c1eS1u+QhU9uD\n+0ZXrabo5KWVu2cf6UwRng6EoRjJebIw5S0EtdQ8A9E4DZJzGZtAfxQbu8PV\nC66nMSOK3oQ3B30raon3OFL2/yF1z3yUM2XyI/XCEOMDtezLEUGthE75bkt7\nYUPy/Zevr12/9ItTD+b1V+HHtXSSunKbFcF2n+Y26x/pIeYBxwr8GK0D+hFx\nS58DBWlCXw0iD5ukL1Ejiy83SlvXAyhEvghjXvWCtdfEAmUaPDwSOEmz9rf/\nH9FRr9p0dExOMVm4Hcj1uUL7Cdh+Ts+qAZbPxy0EuYkDl/rB9F1GSkU29TcW\nhfNH9toSC05b8TAM7k4uWvZo7o/AoDtXUKpke0pdWEhA6sV2WW0OMbhi+vRJ\nR6LjSGLEJLCa8n2YdqdkfAbgxQlYAOf+PATY3jTMtfSSD8V7C7WVOiBRa7NI\nGWRTged/g66rpJF7xNBVDYPFSoZbKyhiHMPVVVmxn4T3+1zKyJgk7I2+XytT\n6M+u\r\n=X303\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2M0jOKgWH7qN26sfzXwV2mcWdH/6X0FxUoXOVnwfZxAIhAKzhgIeTIRlw5PViF3H/mx8ogFiA9sW8a1fzhFPqkDWp"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.10-dev5_1554773689915_0.6452056663381787"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.11-rc1":{"name":"@wework/react-floormap","version":"1.0.11-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.5","@wework/floormap-sdk":"1.1.9","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"649273fa1355091e44ae965e73be830562582922","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.11-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-D4Y6OCu7pr4YCSEXsy7zNzhUh+KVHzI2G0GJ6qLeYV/YP52oQjTNRdoM51Yay9Yp0hsRSg39sYn6xuI0Ngo1SA==","shasum":"60ce49690ec1753af89b7ffaf165624ec10a76ba","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.11-rc1.tgz","fileCount":216,"unpackedSize":1201996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq/2jCRA9TVsSAnZWagAAX2kP/2z2WGPxbJnC2dDzpFgq\nfXRttGIaiAXYnpLwgaKOphxC3RlMjzoMdvdvYjJ9f5knt4nG+duljaCf0KQD\n8Aa8cSjzf/Zudkgn+uzViavgtHln7dRMDIvMUwZDlfLttBHrYG6Ixqb5ZDPB\nNi3XE2CxAL9h1gY/RCjmxa6nmt7GFfrYIqUhSC9msYMofBuQQaKyBcbmOQLo\nrT1qBs4UsMtYHV0jUbXiwOnXFKzOyxwdXwhHir6Y+pdnh4dd/Ibys8yKYKiV\nqhSflczjQ2AacqZBQig7c9/9kA7ek956YyoO727qtK0cyoKRRVRgvT7ImSti\nlrz6YOkYEm4Lq/rJRHoQDqqw4zPHZUDuvC9Uqg2OmFbkbHwL9fkyTvq6Z2B3\nUkYnK7z4DX67VxsIj6tJqa6Q2jW4o0db0LvXu1akrsmjPpOAvRDRHgXUavdO\np8HS5PyrUBRuYyb60xAhEWyNQ++pWMkL1jGotnOmh7jyLLfiErnwo1Cfu1NZ\nX65f6DOiXt7JPOqhkvZ+9aKYaew+edUqT2iUk28elhACbxDgLBxKfjVlyVtD\n38Rj10jyw7PYJ3QeONeWrZ/PSoQTzCSq6tg5rRIBSg38f27hfPXCPpBrzqtT\neOP0KU2CTQXXm2zmjJ8m9KWJjFpEPu1u4ET4oW0B7YDw1nVl9nJfbU3enY/s\ntVtb\r\n=Lyg1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCveIWfNs4ZXLpWHe8vOVKvr9ojUinF/matrAPXjkDqwwIhANFIVs9DowWNKptenX77op0T8kXbI5j0dfXo6XfwPscw"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.11-rc1_1554775458944_0.660484424873748"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.11":{"name":"@wework/react-floormap","version":"1.0.11","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.5","@wework/floormap-sdk":"1.1.9","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"c55e9161e3a4f843ac8415d5d2c84de8a9814db7","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.11","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-sxPfqJptm2MxMCKxM9WYDFPucud6xlPd9xD10yMiudq/ryG72a+6ObaQvP+KuPGINp8/XEmTMEIGg8Set9iJhA==","shasum":"61228ef8b206defbada9f4b8aeb850b7a258f63f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.11.tgz","fileCount":216,"unpackedSize":1201992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq/3LCRA9TVsSAnZWagAA3AgQAIO46gpXWColI+RVrxsc\nSWT0gllo6WykcB8nXH3JUU1i8BfbPbQ0xCzwO7PtMFYezboOUbiPMsjrtyf/\nZbZX+xQBB6jcLFZlulGyZixyvvsL7ChsyseBFxP5kDqT6nSl5yk655lhGmSC\nClB4MNEsg/V4tTqrrSDCx5xAvU89NakkRdUwsIc/yjNe9YyyzhFvPJew22Rd\nb+LntKS/dsL9imtPmKmzkejmsAYH5eFCz/N+Gej/WfpKQRk/v1GJ+3YIWPuz\n8gFcdgAQyvwqWxS5PeppJenn5699ZN7E2+zX/TKXS0ZxiPH01c5OrQipbfHT\nQm8rG8ivemzCtARO6QVMCaKtznTQmryHesjq1WetNwKKzdoGv6cqZrUQAmC7\n/DHycrMlp5U+mK5SjoIqTHKZpi8PqOn7ltMoz7EXH6DkJWmgo09saN0sE/bH\nR9iiU/O9L92vZhLc/3HbKrRAATii7G2eg9uxuHllkSe7CYZBu49ktmeoeP87\nSIu5kLxEB7+MVFWqXndqgug8o9u7tuQ32ZA8GrX7v1XCH1TxHxNjDBJGtG1c\n+pVX0jeMovxTAd9g0xA/GPbLTtojV4XpeOQMj9P9bZc0WUbqVtGE92SW0nJj\nFMa5vuOE+MjDv0TmdYnwkLhq5yfvrAZAjZ1cQNUYT9vV5HXaXgrmg58l+Wuw\nZZps\r\n=AagL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmFNzL2rJDyqVMqXE9yBjflCOPm/glhcmd9zV0TP2C9AiEApjC7zI7sL9bjBJvhIWxOkIZfXQIIWNgLX41iIats36U="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.11_1554775498990_0.6784312986925558"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.12-rc1":{"name":"@wework/react-floormap","version":"1.0.12-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.13","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"f30a3fe7bec76d1766b503abcc1f16df9c1f013d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.12-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-cIB0hmy0mO+Aj5mydSdUFdiKueXPU+eO9NCqYi7xuv4/nyE4QVBlyN+dUPo0KWrEv6YlZY4HdGm9DKms+a3c0A==","shasum":"04181147021122b78d6ce0e00d331b206cdd5a23","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.12-rc1.tgz","fileCount":216,"unpackedSize":1202671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrEP8CRA9TVsSAnZWagAAbUgQAI7Jfdq30yOmLPfxEvU8\nOEl9BdmJE7HWk4vVYuvaiyALezmqkYdZrnwF+7SNRLtuvDhOGpBAhVlO6jBe\nMgXIwj37jBH5EnbFI9AV1whumDMFhZGozDr9oXUMuaOuh10iUysg7wuEsFpR\n0uWIB54lAeA5o3tQ6euyizL82+6Sl304CbnyMfc7CnwfZxR8wMw3S+I7JjQW\ns/jckhjBW2QUrI5tJx+mrMc8mmMdXucRPx4UK7RveSrwJ1LMtX9NUC+T8wwM\nQd05dt/DdHGHZAUkPUy5D9bk3oz2UOCC7CER0J2/0Xstz9kcraNUosI8v5hA\nzZC8i5Dhxgh3A5otfasSM8JnN7OqR15QybCWslPyhihqxI6unQtKkBE9MW3/\nhK9F3pfpebUnAYPE8U8uKqjmeHEl8VCDHBaxnrJUEAQ2xi7byUKxKDeHNoLZ\nQXlpDzf8OMczVhOxFs/a2Egou9X5kTUSJbDNWWhxACDi6ssSp887/RIhdzEh\nHF9Rzs4ahYB27xiW5eLJ550P0yWppHp8sF2YRAD+fN8y2EE2my5CS+TEaV5K\nPxKttgXgL6uLRNwgMCizzASH22BmPyPlAnuHo7EjQlHiZXsaf3VIce6N6SmR\nZB4LYhdTgg0k0nnA1iKHqJX/jCUx4d8zaCVTERfA+g1UnfKHMv1t4WJu1lxw\nCg50\r\n=MxuI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdDbTVEys0ot2b9dZ7EqjCiu7xDgp33aTVUz8v/RiUkAiARMX8vQIVMYuF5BsnA1D+kP8GzVduNzc1EusgklAy41Q=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.12-rc1_1554793467643_0.6549395248319196"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.12":{"name":"@wework/react-floormap","version":"1.0.12","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.13","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"04b41b7672a6c745de5c7b4e064b4fa9875d98da","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.12","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-VhlThfnftela+qopi4UOjhmmcUQXjGAjwE0J6iDTrqOZYAevk+URJCGGa9u3QrkChvlQkgBq79VRXxVbNvY+zQ==","shasum":"e9d5b2bb826ce6cf62c105c28e67cef2e75b780e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.12.tgz","fileCount":216,"unpackedSize":1202667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrEe2CRA9TVsSAnZWagAALrwP/iVA1Naj2f9wODCZ196/\ncJrui7Q9mSf84OYk8AKLb3SpyZwyZDJsGdQMdvcnMlbqsIQGtp/Yfwp9X1Lm\nuJsV3LBcQJ1UEiO2vwIrROyuvTszmrmKLWkpQjB9lxRhVlRXwP/e0kZjWwnX\nSdDt5zmpOVGT9n1k4pyElMgZeOViXOeCa/Rax74HNLSSYDBRuJS3A0ZttkL9\ncJiWQQCM+4Eg0D17GwELGHRAxS8r98D29Acg+3R5WCNUBEQ74+me6xmqS/pA\n26pIx0NAyB7sQBjTbY4pht7SU1XXVJTgoOSbAqHBkGIMc8R3Hgk4k4gPUWmd\nsKDjzXmXh7sMJcabom9+Kn4JgLYpn5QhV9wQ9zWV9XTgWPjfW9FXNHkdpMGM\nT0xcGhgF16IMIRO7b0qcqjM8IALanbKElnf20mvmn2E1IB9DVbxmUfSBP1KR\nImCgyo6dqfgtBIEu1CBonNKz4mkI7+7c6WgeKbvf5fxThc86aAsVb233qUsj\nDvSorI1joMzOXWzQdtpgBuF2QNQP6caP/78m6mmIOe/maZRkOhZn5IJMxuuZ\nI0bBWQy5cCP2hWhTr7D4kyKVrm4ZyQKpED1NoI0Xb+l84aVCYQHuK28A4ixp\nG1x4l8nLiPXWH/cPbIFkzR8Oe2EkeSwHhuIUHNvOAMb+HtpG57+Z60wEquIH\n+cJh\r\n=+s6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoVNARqli1pZAc2i+0TDgq+2XrpHhSQ3nvwOAPQ7YWsQIgCPwKQnyDrikfKkRpxgMPvLE+k5rywAacC8xvI9l3ayc="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.12_1554794421997_0.7810412099006268"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc10":{"name":"@wework/react-floormap","version":"1.1.0-rc10","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.8","@wework/floormap-sdk":"1.1.13","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"5983a10f748d610a1a5d92bdfa11b6d204bd2c1e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc10","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-Ir4kaX8oX1acyRa9g7aFWxAspvkcsR6s9sYoIjw6sLWTYNV+mzF28ST6MpfVSgXpOqjK+SLLKKHT3uDyKmierg==","shasum":"ea47ca793dc8856211e6e1b3f27fbb3660f9d1cf","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc10.tgz","fileCount":252,"unpackedSize":1470347,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrGKbCRA9TVsSAnZWagAAv7wQAJ/F/27XAwvzstIUdsx/\nkRY4gFqQU9VySxuOdUQqDTptJF2cRDxg4LyvVwqp18H00rwCiyXmHzSHS0a8\nwIgYqgfLkuB9lHo1ubOwXHG13GHO+JTh/XoT4FacBCoQhH5SNwrZVDDe9d/v\njmCDRTcT/y+kovaLV/6k0TsAQxEw7uNxupj0RtZyuArgrQ0kvn8uYviTZZ7l\ngHRlop+uu8SBXfhEzJVvEk4fx+tuHPVTi+gmgAWuNKZogVyywKzBesi74ks0\nEkQDVQv4Ki9VkSwqoMUu9Y5/d444r7skwdrCij35wzbtzws/gcocq5ncjYva\nViM5IIISij1IX5Zi4i/VrlYtSopbkPD1zOeHSXoxLkLWIAOX8avkyiLLnRpQ\nAfQl153KWpwEaHWpUxGhoXCzcD3PyzvCDCO+EF+39LyDMB+6JGxGG76EBQy+\nt9OE1o7k+vpWq+Z92n0X6cgDTAxZiC7wLUJvB2lBq60GYklPQLe765mfZ8AG\n4PR6ICXQ0bqjUvk7ppv3TYUnFwa2n+Dzm/VWujK6Se5bHN/QpMJSdyZCwU1A\ndF0yWt1yVN2GuEVO7w3n5oh1PSFr1lfEi+9n0B+1UKkXGIh6ansscX0AJsCb\ny5JOYd5t6zipkxVI8K7ZCPiWFl0YOL5QM2OppzsNw3nEF1rBdUG9iM0vcfey\nQlSn\r\n=lFzg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCV0HRl6pm2XEo56Y1r39tNziddBBx5+oxFSMCQkWb6PQIhAOCM1yuJp+sEfkM+K3nYwV57l/U8zMkAGbPytGVvGxvv"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc10_1554801306683_0.6737526452681806"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc11":{"name":"@wework/react-floormap","version":"1.1.0-rc11","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.8-rc1","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"e64127c43112d46381e064e1373526b84e96540a","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc11","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-5E8+x8FvCFpz1F8jPdL1LXkMsLEpvuUc9HDXME+pGdpJs8EheUODRDXe5SUKSOvCATkzHAKHOwmngL89tw6M+w==","shasum":"25d4e62b1c87c63274da38720e1d57f5fceb0847","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc11.tgz","fileCount":252,"unpackedSize":1470357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrGarCRA9TVsSAnZWagAAt4cP/2Iv/FUaW+mGnyrAfAXT\ngBWnry1l+40wAfDBlZ6j8nG7HADcdcQPL4NaQuoP6J87WKSe8TmHUnxsM9FS\nImL0mUnQr1gCOq5rkaSjNxleon9YeQHW0tG1oTNzWeQNH8rUiYPKF8673x8H\nmh5AZS7pA9Eo2HyuPVem8D0g22RJgIsPegxUVBw7G2qmihH1eMd4tQjc8Kaf\nj6GK3DgLRRg21LwAQmQjEU7UJkmabLtpcd7axZpbFs+pXzIVryQXgdfzo81q\nCzTeSn6jSqBGfDa6Vofs/qXQhcvRShT/AjWlePel7vyNPVNns3qKR6Ah6IYX\n5dHsRJN7gDUONGQxkntaDhIHknk7RleFb/75o5wGCHyJ8YvjY7ycRByJmtHa\nenwthFHWoXtv7p3SkW+aX4BCwpfIwz+xx6FJu/wyxewQqYOpiHHHli2oioTr\n33nWtNUmXNB1NPh7hEv9RkdXI4F9+IUVSFvzH7T0FsCo81cGzSj6LtuGHEvd\nOg+R2aQJgPbfUsNwfTZZUrcs4QUZfm8wNypMANh/LheTGm8mwbL1HTTN2vhg\n02FpTjQKFdJWFKen2ws92JnM+v5gCX4nSaXnNil/j9q1gy8V/9jTzNe6eqk3\nWF56S/f8wTd2MI7n1VqXCSGn1CvcE5hQg8/Ln5/6BH2cHPyy7GCpz8/hMEyB\ndhTB\r\n=9YOu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7HUu6iWNubk1IwiWIooLR0LwohcCIQERa3eU13xWOsAiAQWM8a0msfEZpPSKapYG7NXti4zy9bNVLgiYt0rpTh/Q=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc11_1554802346532_0.7648932436347604"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc12":{"name":"@wework/react-floormap","version":"1.1.0-rc12","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc1","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"e66e78515cc455d8bd25410aebf5125db2eda279","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc12","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-/OU4XMympHYnGgDM2s2S3ie3Td9VEFLf18pQiGRT/+kyXPapsHugiQb+ExG1dSaO176e/PMm6gKIGXowWXnGeQ==","shasum":"1b862e3a8b440a69d873befb62f0cd10556248da","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc12.tgz","fileCount":252,"unpackedSize":1470357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrG0yCRA9TVsSAnZWagAAQgYP/RZaos+v46+FaWJW+p+h\nE4UECBX95unQiOBoEerGBiYpoz6hT9Gl3vmSDvJ/3h9veo/3visVgeoHTWIN\nps3Aebwk99ivWHSGj2+VIj8wVN5zx4+XvnQy+GARf39nY7nl6sZP8m9Nyl1e\niWec7+rirwAZddNZMJGiI/UOSzYWesTpexgKyC58iJDVwH5W5Wv/L89puUpU\nB6JxVqO2TNfbePymI1E+uKBXIJnH6oYXl4fE8yBGk3SGvXRhpcrEwbbE4WPg\nUKzw1gPmhK1LlT4cCCWIJTf4HWc58N7E/bwoLVWlWwX3m2fX4cvdwDKzJWkb\n04OLCElPevRvdCYY38kDKM/4UHMHIHr1+yIS99xrG5pSZ8B2jgGmXHIMaGGn\nf0wYB/v6Pr+AlTffm1z2u/c7ctQoBpVaNIs0TGIh0dnUeZhoMTtiGCx/K0DH\nA9psMcIx7ZWfJtSA4A0nUnP6RMdx0RjQN+Q4p7U19I2wg2o7UUaaMwYuA0Dw\nQ930knQZbyTDGlbK/6pGaWS5Y/wIy7vkxaieUGTniXxQYVncHN80AkXaerR9\nvZo5vC+iutgUQUobC++QqAYGj22OXgEldXfJMJcal1nZmYMdIMC6lNiCo2YA\nQu4pCSN0dB1mNii+FDvmSEulMStRpWbSIgsbZ/JyJRvzcMvQJZzhxx9ZSOmD\n2aZt\r\n=RRlT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSqT9mN18wJo/hqoCjRkGGefvGZPlewSgH4e6EmvtK0AIgf8PHXGw/CyK4KNiurR7QBT/CJ2KJxPJzQOuwAFZgp98="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc12_1554804017369_0.45755215654924797"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc13":{"name":"@wework/react-floormap","version":"1.1.0-rc13","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc2","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"d8f9dc79be89cfadcab537c0dd27c1e228c609a0","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc13","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-7IfsMep47XOYGQU9gf8BTZAj9KgD45Tk8/TAFpXOcGG+k+9QZJV6E/zxYjN+RRWuFKi+mpfg5F1US2dbb6mZFQ==","shasum":"95fcd2502bb3dc9236f9a3af33b8e4e68f243607","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc13.tgz","fileCount":252,"unpackedSize":1470809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrHl/CRA9TVsSAnZWagAAbegQAIKgyuVt4l7XtCR6Df38\nbzOYn0fiyG6wv0ySB0kOAA+4yHBA7qiTKndGoedpZcOCPcjyRmEJfD3XrZqo\nXk03U+wIly47ggWHjxPqwd7NDgqhkhmttvU13L0zM3KH+gdo/NwB/JavMn+i\newC8MAZCu0zJ4ft18m8sle5hDD1WB/q5PyJMpLBg8/eTeXvd7UgX07R4MMLy\nzLQTP6K4Ah5UVE7XTfmG7h1ElZfMBH+KwupT8m1uwTaT50kUjcR7UOPew7TG\n9+KKYmwMOvhHg9EU1WhGcbrQE92DA+ScpQoiedDtBdzxtdKWxr5vvWqbW4l+\nw60ycWpWQeecFjqTekZmGU+tvyW+oahgOptVECMuD0c2cQxX4DITFlQoMCLO\nZwA2zxyEJ+NZqs+qqLMq5FSBT9SU/Lfvre9A7TPgziPZHKoxrQx9v2VxML83\nIJgFGSHzXpUBe61XNEKAI7wRywTWKMnNjHA/DymN7SxlGTnuBp/0DRpZtklN\nhtp8aB0Iz9AREeSxAyLvKXAxaZAvv5TDb2giC1FPH5x0xdo/7EAS1w9aHxby\nFAhrjgo3MaY+8eGfOm5CPu+46MnOsrK68E73yD9FLieRgvv8C+ZkvCsfWf7i\nuL2277z5kJRn4/DxJ7CBGQCnr04TTxMxaYXD0HmhHOdMe5HyqMf1xYpaSepY\njwR3\r\n=nBvC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXEAvHv1y0/RD8Yx6200rApS7khYoD1/phiR8K1EPntAiBTorGLp2Jz6HCmRaXCPiowQY3mKnLL3pSUdSxaWcIUog=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc13_1554807166603_0.44867072130028984"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.13-rc1":{"name":"@wework/react-floormap","version":"1.0.13-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.13","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"75dd9c207baf7728b2f4cf6b51ab279fd8247865","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.13-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-7tYl2mr9qLEAKqIalc2GxsbdQKROe/LtywmSS77eeKxljExVhoF7I71JlDeuQD1Sa3QeAqknRu/+WSVTXda9XQ==","shasum":"6f2f872376145113eaa65c9b9641db99fee68910","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.13-rc1.tgz","fileCount":216,"unpackedSize":1203766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrZGCCRA9TVsSAnZWagAATDkQAIMYtTrgdUbwTXeSZQ+J\nghzKJSBgOY5jLwwzIPuBB9spY2WcewUJya+j9t+qtvQcwYGUOK/U6uV4qpEs\nf5Ymx3MV+jK5vIJwtnflxdpKh1JafPx2UzjydPa9+5ACd/cgR/VEvHgkozaX\nmHGulXsIn1fwM6k/cOpOneThou26/ICHKFnEa8M2CwlORu2lnKHP4pOvykGx\nV2kmW1mdxLzCt9A1KONayUrUfCIHp3r7S2sbuHWPiLfPv0remOTRb1hx9gq5\nQW08TfhqPJwBQ7Pd0Jn7YZlIDFickVsxFbJnv7H3OLGkKhMIMRKPcSS/eaib\nnqwy+ajq5hQANlCG7ErEZtMgnPQQaih/BFs8V0JA2cz8Tu4bw9BEvfVfoS5F\nFn2Zz1v6+mV/PoPhhN5oQih7ARFTzEt39EHn3Ubdtd9l3SLJVrrhk6QKO/sZ\nH59k8fLVYv9d2qSsx9/rk5ambSBOseS9AVOsTy5Q8Cy2Q0jbntPss+EO5Lsu\nESNKIAv205dnfvwLz6BV0MH+DGF1x6qlZshxRtVJCyCN0g7BGpPl+sGurT6Z\nKZGEzCtnpV2zwNwyd5JK9y2Zx1cmYuEYm6CQkJe4Rkd9Z95sDH+C1mBarogc\nSZgUi959ptOZGGIpJyT7o+h4yPBkpxVAMEgYvslo3CI2j4y9l0l2O88ri8HI\naY9o\r\n=7jfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAa6D1F0JbyuZjOhz3Q4jn8mKwX5QRxUJR8r+Fy16y4FAiEAw/+O9vjny5kJOXPk2287FgTsK0lH407EZlKkJMjCBME="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.13-rc1_1554878850101_0.8313381961895965"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.13":{"name":"@wework/react-floormap","version":"1.0.13","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.13","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"c1af010066c737861b882efbd1014434dfe56ca8","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.13","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-30Drei3bmTOGQpuogSPkv6FqqHAD2Z0FjfTFjNlVlYemYix56E/c/JW+YaIlfkz8KNPoGRnIQJPUvjEqw0fKYQ==","shasum":"9cd6681dba516ebd36759f346b9d80cb725174bd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.13.tgz","fileCount":216,"unpackedSize":1203762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrZHMCRA9TVsSAnZWagAAr1QP/04npBhEgxatqbKXSSjM\nL0kl2+TXR9MpXAgzmd8G2rmX7vjzHGYr3+lo2pLRBWEVSguw+/Lw8UgdxzO1\n/NDgvm+r89ZzORm7uuWTx8CmwbMsTZ5AWE2inWjToBPvWZvipobbNdB4HrO6\nogxcHFshkG6FBw4j7w/mLXnVNVfhQQBK8SKEn9OitU/68x3Ql5JpWB8hRIQN\nlEMYUcHFOaW64KY5qHjhI+S75Iw21bIBd1sgc1iPnFdKFeIjcW3Dc3nYkyIb\nezMD48ZWb9VMIIGiRw9JIbYMdeH/6ewdMxqalzSGutBI/6ev0jG3AGWoFer6\no/vUq2gz1CjtlyWAZ8Vsk75KmBefTQWPPaprN1FzaVstmZ75DSR6JTbCWIPo\nYSxtH7e0cLK+N3e21bb1YSO9Jk+1IdwZ6YoDaOR5c3nfwyKpEaqmoSxDCDRx\n0h/HGvCrmRQMwnGk/js3rEseboNniouLS/bge4GBPSCJSIajQVgwdgFvcBY1\n+ZykN0MLNfUsWG1U0l5XN953EIDSDqkJPmyenGozC90O4hOzDoEj8nFQhKto\nkJ2fk8st7Dq0gaddvtHw/8nE75dLHouAfcrljwKtC98GVc/PDQoIc6Qtne4+\nAN0iJAWbZhOsYsicFXQ3lpPSe8X29fgCSKUE3r/v3fzZUzhgHOE55kpdbtqH\nxRQy\r\n=SBtC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqaKA23et//B7nDCGX+uOzB9NAvqCh8P4jL5iw7huThAIhAMsRPxfhp4L6MhItb9RF+5nrLMUqgQrdzv8VZ6YecsJ8"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.13_1554878923539_0.7660419303334511"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc14":{"name":"@wework/react-floormap","version":"1.1.0-rc14","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc2","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"02f03361117b4004e82e98db1fe36ac6a62d01f5","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc14","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-YFNm1Ph1qrbWyiRsUs5c1enH1pXA0uCadkLgshsdgNR0wObBRimfHFJVLcVktVmtq++8ESJU/12sZcvQiuYVTA==","shasum":"2ec8ffdc3a064e666638de9187a7892299594dda","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc14.tgz","fileCount":252,"unpackedSize":1472702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrZNHCRA9TVsSAnZWagAAMVwP/3XNKnkOgAaE17wcmgXc\nBgSl7Eoy8RznnuJlMtbSSZggmNTQABqf9egL7Tjz973i8LG3aGhnEXHQFGSC\nccdK+EdnMkMEkEiXEEohhGaZWk6/zE6I6nzwKV2XLYuXChDTQEoE7MKensi/\nmOnz6qA93xbZhRBxV0cqhFAWXDE8z87K35bv0wdljqD+4LiLZMnmcq2AyMaZ\nvH/uTYPul66ce/Z0Bv2SZXzSUknKULrkHOYxFsaVsTFoaE3R9VYQ20O69Kdt\n5nogbeGXVsAUCC6QSFGf5kJ6QojnSye/j1KRfzuvZuA40O/2fiZKBiiKcWyh\nxy4L8DN/NGSZ/LECtZZkSq79mkhyP1XLfzbNK57+pB9OP3fPlrz9snsz99+n\n02uj10FRCg0VgWk1KPUfwUUjN/Cg4BUUVxaf2Uge5rs7+usWeQMGvWBa0pz8\nDYs6cfwKKOg8FnImHmKb/Lq30TqXCyCLpoHqQJ6OScjf2HLiIsOmqGShNe4b\nyJUYWW/npwsYbuuM/c6B+KmQc9GtXRcvfGNc1VlYwFD+Pnuf4zewyKi7Kq8i\nJHOwY/BbERMugIGAEyf1kGE0Oyd3Uhf9pPgXJ7i5GWR+0x6Tyd8+s1uJIOi6\n7pVVG6YQLF0TC0bXjDt7wo9f9VrbkRzlm99/HMrf/zYADOAHo1W1axDYSSvS\nnmAu\r\n=Nzxw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyyO8k+UjE9Wm2S+Lgfu/QDIrFxcV3irT2Tjatzvc6wQIgcVnf/jWlRy1tmzmtzDb6XGdE89VKd2HQEWi6trUU5ks="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc14_1554879302496_0.9520993917412686"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc15":{"name":"@wework/react-floormap","version":"1.1.0-rc15","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc3","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"e2950f5828dc627c45a0775b6a9f20e9acff9812","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc15","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-SGaBKzCQA3KteuTsj1ONGpGoFDk3TL+v7kJv0DfyGlBTASVWw2fuicVqxSa7OndZjYMznzFpQcGrMYBFMkax/w==","shasum":"4b7313ccbd94c7c1fdd800e10cb2fce109301be5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc15.tgz","fileCount":252,"unpackedSize":1473642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcra+JCRA9TVsSAnZWagAAfLwP/ROGvluhilbUdOKFUlAn\nzKuWuuWevZsLjUSzDz95ehNRtmFQy1oDSc5lr3ppw3Z8x2shGYugZDwRc0qt\nTwFrLrLjC28EPeOk7bSSQ4/w3OZCydifwwcNElvKi9D1Tf8muynWqULScdp2\ndK9nflMpo+4iVUYPwbwRNWWt+OIIToBADxSvGSHFVQxYtF+0bkpiiFhd2CHd\n7+vWAg9LjNPbv/UQsPaEPjzkWQAkzYS/RAOP1r/75TBoVrQ7GnenKJEdwxC5\nuR4MgtrvOjOl8zBaWbkVxC1x+dOXrG5vdvtnpTfhvGkVhTXv64XAo/88QgEa\nfmptfK39QIx/zutV+sryGcI6Inyxjx0fZAMXZ/DYEAtRfKQMRcsRT0ggUpYq\n5KXDqS2TtxlYPVm2lfhVh5wcPmY3Gga2qXr9LqHYN6AIXtCba8o0lKapJTrD\n1Z2JpLo0AVfKI92qV+f5b5dB7d+ZmGHM+CePmYiJwzUW9nDq1OAUr48RZau+\nJcSwsZ9wUG3lOmvurDT9GRPgdf5Y9RisjJAUvwF+ZHNKylD3OodXVGKjKvCg\noY90HfNFa0vcpZNl02pgpKQslp4+GOjR5nuNQhplMi3h3DKtgPDjCW7fE7YO\nm0ARRGUD+bT+yzJDdCMTsxcafZjZ+YzgD9spNKNYbRo+5mIhwy+7c5QPbLNC\n6y4E\r\n=2gdS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvZdG9O2eZu/1BxUak0GIsC3Wb2CQcoSWguX6tkWvH+AiA0RMQTL/CIBTAwdoIthgqFxCllM+4DORtoi3/vajgYdQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc15_1554886536201_0.5072588621220859"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc16":{"name":"@wework/react-floormap","version":"1.1.0-rc16","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc3","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"66bb360bd2b49357eaa9a546a5be393d80490f89","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc16","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-rjekEZw3l6rw9ATvm+vOV3Vzbo5JNxxKE0UHycboFh4Fh8Ox/K4h0V5wtzQHatxjffx+zr13nUjEszEqjoWCKg==","shasum":"6f3ed0f6cc21c5f956a22299e3e0b94b3d52e007","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc16.tgz","fileCount":252,"unpackedSize":1473866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrb3dCRA9TVsSAnZWagAAUQgP/iw6FSXywXNXTp3bM2gu\n/NJDaxxqgT96VEeFIB/geqFZd4s/L4rowFoaWVcyCnDMmtX3I6nrSki4ecwc\nKU9JE8Jv7zz1xQMo1aHmwr+uhD4VJtr6uDzGMuZg0A2GL0tHSYqxf2xiK+mO\nmAY7ytaD4nG9ZLPUnI4a1Bo1RAwNKSXL1NYR/sJLEfRZK/5qf7kYOsU5vCYf\naSda8xU88CJH5zIM86iGifMXghSbgxRZqGaUbc7YlA7Duun37LY5Ed2r/tnq\nMrsY26xmDM8lIfjhatvcFoZSG3wsM3ZSmgYaPeI8DzHSU9+3tYWX6o9qZWxR\npH0bpzq2xIGL/FyJxw4gRKmTA1/Wdpdf06hRS2MUE1JqRNnieemNog3TAWVD\n9AHkCV4WoZRyn6zKWBSUWO8eiW+yyF6Yz1JrzLf0yA2a5f7cyUbj73/cM9fS\n/fEzx2nmb8SlhfGsbqpv6SqFMB/JPUpmvPv+6CwmnehMMmw2dubKzQnZKom+\nrOFtj+aw4ADArhepyGDNA1cetm7O0Vgln5VnM3dEqgm69nnt5NGUIjIi63e3\ne5JwkUFtzcEQ5XMxL+qY9gBQabDF0uT5/NL5Wc2mzpT0MnBmSgLdLxsiB79s\nxTUXu4tdNrtmPqlVw2fa+AXMxek3CRR3EqrbpDuIeB7OxWP9HlcWFVpulgrm\nigBr\r\n=osFN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJUoK/X2aVmcDB+6srjBNJWwS/wx+NJd9foN3IkumFtwIhAPQ1TDljjx7cw/O41O0t7TGqo9TRk+DQVCdTJKGzF8Jh"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc16_1554890204901_0.9349888608110046"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-test1":{"name":"@wework/react-floormap","version":"1.1.1-test1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.8","@wework/floormap-sdk":"1.1.13","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","gitHead":"b8567e4e98e41fe6facdc0d1641da4bdc8125e01","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-test1","_nodeVersion":"10.15.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-8fkva/mB6h/drBjf37kMKr7wdc36V3d8ehMIARxFRhVv8CkbEAGc4xmQbtA+OTA0AM8+fU1OB06i2TJXADHo6Q==","shasum":"38c96c58fa88ded54c4026ab9fadfa0b8ed6dbf5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-test1.tgz","fileCount":252,"unpackedSize":1473505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrcskCRA9TVsSAnZWagAAgP8P/20qF/f7sq31KoAO6ACk\n8uhiq1+zXbjyVrJ8j2bPK0srXvAmqK7oLnuHmmMbdOEdbT5wiRFS4GDgaSoX\nPRdnocyFkxtIhYuVQiiS/wjfUbiw9sHtBiWvNXO2XDC98zsEOl8H5VBqpmxk\nc/TZ381AZ2Bm9yIppc3WE098NvaKO75M2PcznPOBbaE+hBbEcSy6W0TdMy5Z\n3Eceo5MTJa4ZBSNfXU+oAT7WmtbzPQjY0eAcvdm0QnB+0qiyxyChTwc9LMpw\naGrx3BQX+bYREId3e4Nw+pYNCCBW1OyIlA8Bdt4QR+SJjWbhcli70g/ic9h1\nyaAmb3ZFREEG845e+tIf4ted3qp1UDy8V1BsDyQCg5+M4ruQMf4xhb4r00Co\nwIm1PMR4F+zX5HMZC1IRyc9HdhTJj4ykcklgde7wdywdSWqyBDMBYde2JEq+\nptA+SL3hWrCjdtSpAprWlkURpBiIneYdZ1Vgd3zoAD13D6F8d6h2CSsVO/Ig\ntMjkEUHRUteoVYsbz1zWrBZVMa4X0XnJWiAKxvbchn2Yb/z56b/amIM+sr7J\nDzwt2oajx77vCL+P0gh4wrhVyWn+EQ0ZBoU9IrxKbrUE9RkwWikEpOqWWbKI\n3TydkPmCf8eyI+KK0/Qgbri6WcSrmQfEgkd6o66gZGWugzpK1lN7pk1C1iZc\np8eI\r\n=P8ND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOWg+fji2hsN4/H8op+KmHzQv257REs0e8B8rn/Z7R3AiEA1TwhhZQYX1QRloXnNb0eC7GX7emYiPDyyTnRqh9wZL0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-test1_1554893603756_0.9340727127912769"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc17":{"name":"@wework/react-floormap","version":"1.1.0-rc17","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc3","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"1399faa97307f25730136ab4b84d89f23aa75347","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc17","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-dkdgB4xN7Efcgf43qONg05vN7ELsnW9g7178kQF1S4tqLAemBl5istkNqeAgHsYiZFDMv8qGyTQhEeYxEPjmXg==","shasum":"385491814cc129bacc6bee649af3ce2ef587efd6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc17.tgz","fileCount":252,"unpackedSize":1473760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrsLBCRA9TVsSAnZWagAA1uMP/1L9caVJgB9IMAuadB+S\n2XbK42F6GUnTTtZ/fio9vSanTZIP8Nu8vgeDB6lWZxm9KdcEa5Mwm+e2BmCD\nmTLEU1RZvcxwn2BvDuwdQUlbdC5KmejSUGANfHKo1ZwKzJdKUtrZhwwm9HVu\niMsoOYjedwZonLL731pshA768nxpJTO4TclmHqRvD2mENKS2OyNvMXS0VozN\nnq6OqctayuXN4CHmoDSsg6dmqwhR4+G263DamtN3fovi0Lj19Wdl2HB2Z7p1\nFy62Me4vsoFv2hbTjMz7imL4N3mjD2dUVH44wo7vAw7dbKlnW+pqJEi4dRyF\nTC64z/CMEz3Fl4jFGEJGCqMkkPoHqRzOGp25PRLwsNIh2VIiD6RMCc9VJc56\nTfy1bEdnxvKNGbFTtXdoq4FyqqcCSIZtPEcCezB7T+0Vd4EgwIZPafL+e4Rl\nPo4xoTgwueU0yrcmFLWTQ50xi+O/1OxgctD9d9lf92e+N/uHo46PfGMV25Sq\nzeH+NGWf/6W1I0KAEY+UyNRhkY003linTlw7qSsycUFz2Z7tfxvUO06OBVkQ\n+yD4XlHUd6qb4YMX50Nmz0gIi9c9T6MLq5IAQfpjPmA1V+AT3xEEQC6aksGa\nctdkUP/6NnHmPNC7DfU8Vp8B3W8ZXcKpHCDzsZQvR+338gUtMRxe2XKB7wSO\nidLv\r\n=ZPnc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBj0rzYpquE9brukmEuXyuZORI1yO9qbpGIBx/B8fLlYAiBOpkWOGYksr97d15fOPqNfrWJMybUIZh3C0HXuCfZ/iA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc17_1554956992977_0.7461043636800833"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc18":{"name":"@wework/react-floormap","version":"1.1.0-rc18","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc3","@wework/floormap-sdk":"^1.1.13-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"84c8b624a25baaeef0f1e1aad1df6c3712f178e5","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc18","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-rM1+PGR7upN+epKRizrsmuJI8kXtJ/VV0+jPMJZkkpC3lB/dAQ8TnnQDPsmHEN4qBL8X4jassyvLddSen8uxMw==","shasum":"4714d99a92a1ab4f2de28b790dd14db0b4c16c2a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc18.tgz","fileCount":254,"unpackedSize":1476702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr/5nCRA9TVsSAnZWagAAjKYP/RtiY62v3evP0dkIVEt0\nX/mnr6W4n7Y35Lrfwz94rFQUQWdWuLH6U0hz2Iv7leRzIAJrJEqUare1flZc\nEeLPxNcNMrQBEWxnTkw+7Qn8O7tG3tGwwVVY4CzEMTTLKztujcrSn8qBwmKa\nDN+iIynT7oawJ9nEva44rmes87Lfy23MRhh0NRXFy3GKIhEWvZ7YXidgEEZP\nzjiqG9UZyg5qR88qhuFKxFYCdv3MLe9LMleSMq6pqjTwJiRpeU1bwTiFV9v2\nHkKyuuAOKJH1AGBN+bJgAjldw09A/14a0a546KaUr5Zl3GXiyBuqkmLBR0dl\ngLZd8WGb+Ob6kSp5cOsiJEejYgzGQEOm1QFw2WkWTaL6JdHSUUFKCr08ncsm\n1VUdnnkbiBiAOFtl6VZglM5PvVYfFvC6G2YjwJ6ZJeiM/OhlvxC2hSqyaE7Z\nqCgKzsecBJDk0DUcYt1pd5sZMlFBdjzD2d4nu4AncVybAI5lqSLK9pWb/C6x\nZeP2v5c8YANKiyS5dcjuBow6+CE4kS2pkAVC02iDIrPkftsrTP3iKAcATgS/\n7uECurZvZYY/v33pasLwl6opO8QnqOYwNGZoTC017pRO01eY0KJM0bDCTuUl\nce635lLOWbdFW2L1jTro9kOh/4fXYqJlkh9xVS0ZEFuVrJhM5vnUneTKqlQX\nFfbB\r\n=iCkP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR6i4kMGb1vLeFGLw2rigAJY41KKKnDqOX/kVCtU5dDwIhAMzHy57ItHJKkiLfTmhxE+suvakpuySafaxyrHqCJkfT"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc18_1555037798921_0.7201004325331846"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.14-rc1":{"name":"@wework/react-floormap","version":"1.0.14-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"db2ebea833e79ca87cf2a427a3a16154f8fc8f93","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.14-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-1ccVyeTLiKJlGid4cF7XalTS2AX5eJxRbdjwTwn4Qrte8mQnVnGoBUtkhhxwWfwuAnFu4wwjPqlo0LOXIgCBnA==","shasum":"939c7ca28bc4e4a70f8ef8a3459075c339d5ef6b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.14-rc1.tgz","fileCount":216,"unpackedSize":1203770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsBwTCRA9TVsSAnZWagAAQX4QAJxRQESotJ+Hpyq0lWAQ\ng6L62MH4trWJ5zImtWu5zD9BVBqr/VPgMgV56CFn9IDbJzgLvQ0xZC+7MfrS\n0I0L2matDBD6x0bZRpNvdryfmdAXPCo9GTEXPv5SnTNWV5vNwWxRDuGLlntB\nCz7i1HSWC9PyUgNkH6Rle+H2BAJbxfuoDXy1EQCrFPlOAmwiPplJrAHndnm5\n8D21281+zI9x5zZyHJyvmQuuSs5k9gTJo/uPATuXUQGWjGwhI2NH7Aq7ujqG\nVZQMRpmAObnJ912pNHdRQwnRRkfOFrORNgOEL5r8WXYNmwf9XvdpXGtPma1C\n9JcCRjMvlrOqcBj+gFHCIxAZs8yFJsB0rFbRl1ZiQMYBlvVj4NGo5R7SFsSn\n8+z4UJzgHWFqs8yDsDMKdhVn1llzrZS8u6eMgk0rFRh0Mg/5nAx6UIa8wAii\nU+wNYPcN5V20IfNtCIm/JfESEimnww+N3g+wainKC7e9a43++g5WkJJNzj87\npUrWHWvGsmCtecrrWc1ZilOJ2qcrr/H5bf1g5UB8/NR+4bOZIMeb9K2M/jiM\n+wFHPi7g8vulMhGBs3K8X4uu/gY6jEBlA/wbmiPA81HxiDoO9fS+n4K2w2xC\nHBUaiO4ddnj3/dewFzp+TokeoOBkrgwzJyYnUFa+Rd6memiLiorYg95q7aI0\nhWB7\r\n=B2Rk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZJinmtQg/k/GgG9DB3t8xH1ycpLz/EDrUA2biTdU7TwIhAKTchrNtjK0XYBES08PH1ldiDz+28lJz4FCHEsURObN0"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.14-rc1_1555045394572_0.3271991334849267"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc19":{"name":"@wework/react-floormap","version":"1.1.0-rc19","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc3","@wework/floormap-sdk":"^1.1.14-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"448859ab6f1eeee3fdcdc1755a9e321789a0f1e3","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc19","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-fQMxkAYLO0sRxdVK/MQ2okSBKjoukBwK+rZxecx4sgRoA/wWhJf+niuJf5E38RhTeU6C7Uub6hDLSplVljvuTQ==","shasum":"1d1f632a25014642521368f3218bdfc0440cd770","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc19.tgz","fileCount":254,"unpackedSize":1476680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsC9PCRA9TVsSAnZWagAAABAP/1QKuDfiwHmV9CwWiMYQ\naNUEfiS+r12ID00+RHASMhRFFEgr8aR09Krjkxt7wE/etK7SXdzjlE0XEmYw\niB0Fywp7rIHpwCNMUzzCWQx3Hj0CeIhdz43bCXqgTFmLsrvDwLQQf1etcYUZ\ndgIcpWgbMGISATTNv9zp7m55AjCOHGYIlVdOYMe6P08r46j/aJmPTUrD4MJG\nz2JaNSytt8pqSm3Fl2KD0gROEGsvNGD5VLY9SDPhHzDF2EyNe8VmkkHx0rEu\nq7R205F2bM9230U3Dj3rQmhzuYWqaQhGA3yn6pQYjbghTfHZFRaKrvvHg3Ay\ndlCwXpUpmWKzFq/oa+C3n9+Ezc3LhbMic6z2yHjz9J9a1DOeXs42/EIXAyFU\n8VhFOxpCat7xit0/fn4moiJr8PEOevMb6MI2dV9zlp9TU9Mo8xtowSqCoGnB\np2IttHsQXBpdgR9IRyNFcd14SNdQRWKC5NBapZJgP5Ls4GhhWcyzfauiLdCM\nlxsvQKZa2DdmwIPfGvDKcOhLLqDg+2XhcieEseSI+jsp1e4EK+nmwZAJl/JQ\nF21jIfXzC7Nr4Tlt5PR0ufjkB4MbGaz0dL7E58jwUzybIYQ+a1j6vhl385b5\n6e2T31dzrWPzMOS5ahHuTTdVC7XtShfKSj5Y703/fiM8/pa0VE9Jqa6yoaHA\nC4OK\r\n=3uOX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbEhDIsvUTIOZsf38U2b+EWIchk6rmSTa4YnRMmxcp8gIhAJ5JiI+XGYldfvAvtXvFS1lwB61Rs/PxFxPRHT3+kCNS"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc19_1555050319070_0.06016060264774992"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.14-rc2":{"name":"@wework/react-floormap","version":"1.0.14-rc2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"b191f2fe40b45fdb86d028e76ccd323383030cd8","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.14-rc2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-kdquyNNyLXTDNwaTfZ75JqkJ6KLWFOzFrHVaXngkqbv1i9p4qWJhF9we/CEUNP+reQAjV9v4bxUwk0dxs6RpLQ==","shasum":"d4c61ba6219085929897185dbbc1b360cb27f2b3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.14-rc2.tgz","fileCount":216,"unpackedSize":1203770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsDQ3CRA9TVsSAnZWagAAu6cP/3Zapu5D3+8Q9oKQOCfV\nSgX39cvp1V2iSeiSHlv/n+UnuZqgDOzNvVuCKcTloZLeLIKj9RzZeug38rsS\nctdy0wQaKHuLxZt0hU52ma3YpjqdcdVjU98Pl0XUCk9ZlTEMpHyb48mx32a4\nAfJ0H2WiB/0KspaHqYozQ6FAmVSvr+XLY46UxLsJb8SvLIFZ7J/W2UktiN2a\nGTXTbQgUVcjocf8Sd9VXjXKZvue9duAfuNTjC/5oHZVHikbtcb7Pw+ulAJm3\njHZOrqBbol8dk4kuLOKq14JYmVvsk0JmIkwtQNR7TvFk3CyuLPmeUW9NJaDz\n9Fzzcn0IrGSzZscMJ9uzd7cHSgnYQIlj04anZnFHXUPGPWq+/67Rc/XR9fvR\naGYlHs9OG2iVMuwqmTn6tv6eEfO113gCb97Hhl/1nxaRoj9tUG8d9Qb89KCH\nbX1zr+5bZLwcvFDXeWFtkVpneY3M+/hJWTfLZLErgE6WFUi4qqz1EJ0ZApT9\nAMQt16/M0lmkW/eEcWuG6WE6oBOe3WoPhZJV+5jtOOnCaone8l4ilfLnQN+/\nv/FFgSJhJyHVlpcj1zilP+vFweIgo9EY1bgo/GhNHe1aqMgiRJ1GsQam5LCX\n+CjUcBltR21h9thjIuvpGHJ0fOEcXug7+911h0nnc9sOGAsxwqurve5vSCES\nvp2P\r\n=f/Vk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZQQJMi9z4L8UmOsNIpKxkb6/xKPp4QIdnIrMXf8q7TQIgNKvephS+qET3U/GbpsAb7pZc8J0/GlPoVazF8BzEdTA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.14-rc2_1555051574561_0.9467823693825987"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.14-rc3":{"name":"@wework/react-floormap","version":"1.0.14-rc3","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"e36ed3521339bd6fa27ec2cbbf2b71aa65b10681","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.14-rc3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-eiWqgDUKnuSrC8lEH9NxcdWKMbrSCeP2Fl4KZG2FdxVIls9VLWx45AIShenlwwHCXlClpyzryH2NlS9TCN+mrA==","shasum":"5632c5f8589cdfc531e7219d9168b540e36b8875","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.14-rc3.tgz","fileCount":216,"unpackedSize":1204576,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsDoBCRA9TVsSAnZWagAAqrMP/3aE29nNalMvSeCYwmm4\nbKdMSec6IAFyg3QskF6vn5pY20vsbkS1zl51djAmpkTx5Wf7mAsetyX5CXSF\ndhZIsr+JnbYBxDC/5TPDum9mi6fchY9M0kh8VrRWcqa9usZfPvlKqG36SXlo\ncvrd3xzYaA7Ku29eWVFuPwY6cBaNjR833OCSIC93poFPuSCbBzL/BGJhtTf6\n7C9bvUzrH9A9JFcWkJXFDeUo38IvzYEgsPdZz5f+m7RjqPLBX74Wev6LYF4+\nu0PrYULwSGlnnNBz33559+miWyo8jx9OFGnbVA422BRfNPET197+waQ29FLv\n5O68myFHAFqQ8c8kWAWILgINaLZA+Fq2G6JLNmPlIT5lCjIB30cXShGuSLCv\na6Pnt02opBerNM9uLJqeGbhEF6GTQQb10H07ZffF8oVpnHGMmTSxWbFIN0QJ\nNbwFG5MIccHSuDz6JFSS/1SbDWmurOoPZGKlhD4kvqaEV5EZVvqkmdgs9OWa\n84UB7ZdISzByU1pkfO/LsBWi73Lu3dF2Jp6dpVeUv9Hsr65L+tlY9QLQvo5Y\nl44AKWqbiyml51M4rA/eSJRiKROCWe9Wih2t1AQzl0fmzsoQa8BekyTYpMSa\nXyFGgy31HEAm5B1QEzCJoqDNs8vOCVn6PyL6D6o7eq55AwKhJa9XNoCddC+8\nmZ62\r\n=Gf3s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKkzpR/SQXqKdrFhU59ms0WpgcFtRbvT/ooFx0WEUW+AiBxQuq0t792NghBFAzV8NN0aVFdEDv7PsGbRtbLP9PCaw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.14-rc3_1555053056515_0.4973485477081412"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.14-rc4":{"name":"@wework/react-floormap","version":"1.0.14-rc4","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14-rc2","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"62ea7472fe9c01ae68efe70f6ca24f2aeef5fa11","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.14-rc4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-XWawmZHene6y+vZKmWz7xVoIr4n0R/NtC1Ki/veaCU2kkll+C4JcvMi2gm6lw5xEm0Eo0aHE95U5I5CoUI2Ptw==","shasum":"66ef8e3e1203be174388db4e5cde4f8d7a181108","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.14-rc4.tgz","fileCount":216,"unpackedSize":1204552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsEWuCRA9TVsSAnZWagAAGL4P/RyGZWYra42PVl2WLMgb\nBtsp2Jn951jy7hZDQ/9rZHUeTDRMic3I9dgQqT7vv+rzhmeK+j5VNsst7Ky9\n74DvUHl+LI6TgIEaAXs+nyyRZv8Hg9TXaero1schPdDnc21WHKLDIpXtp5X8\naE7BW7uT+zWb7DLDmLI99A8Mo9u7wGkncQ5+rOcTPTFO5oRxOKjOBLC7hLly\nBUPf/6Q0YkGpWJpT7uLWrBi+Qm2ifNk47m77kaRVPB0XBdknv3KReFDBC+zV\n/NpM0A6ivcDPw5v+LnYTz8bSpZ7PQ/eav3kPLde5tXG5GZc4HprpWqUGHi8U\n6SWNGyU409KtpsSEMVE2USSdiy2cz5KdsjmFiRTFuxSmP3mQ7Tu2+gduh9m8\nZMci//mKhuC0YJlWrXgloq+uLRMPSyOamYlYELLSfXY9BL1TaSh3xWgMya/K\nX+stvycAyboSkGXq9DWzHGqWX4jwlLFJrYKcw+cuN/6WpQc9uGL6zkiq3nLG\nNQot2weabDRyQd2GndvKQHpfVyqf6iEw80Ai1ikXpnNxF/4PA/Aq7pDiaR2z\n3YPh7+vU/LITpaUczkz+5rvVygJ23WRznqaQTzzt7YToc/2czNa7KSdeL3Rz\ngHERQtzImHtWM25UZVEQENMYKOOsDt7AnbTJbKdTfU4mlxkSpQl1oWze4xMM\nPm1R\r\n=8JDB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaqJ7Rt6JGouIZy/rtdUGJ6dJrk+oK4oT8ihmcMDEf8AiBU31+ye23BvChDWetCEVsTjxDQNuykXQh8op2bwrWJhQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.14-rc4_1555056045940_0.13606078158500834"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.14-rc5":{"name":"@wework/react-floormap","version":"1.0.14-rc5","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"aa884442151dd4c537f0e009c1a8a97aeaf68573","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.14-rc5","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-ahBvDIl/u7WAkrJzcbCyJJwo+wpICGGu+BLxuoP5SpUbfNaUsXxKSv3K/BES+C3KnKcYj9lPhKv2CNDLjmBzEw==","shasum":"b1bbea7a5ad31b0198a47fdaf121e5dc9808a60e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.14-rc5.tgz","fileCount":216,"unpackedSize":1204548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsFhqCRA9TVsSAnZWagAAdHwP/2VsPW6juAko+n9Wl3di\n2TkdYHeuZGFA/6lOR+EIhB/kjo2WQrCkppTLew6jwByvGq4cgXngiqi7SkXd\nJdM6OEsNxfQf5HEeMw6jUt1yVmrGE6vlkN37L1p/8xE3QpapKhZkpYq+9r1p\nX24cdQ1QngApSiCJJ2yw+1i7ou+d658AOGLpOv4Hf8ebSRSF7s3JpaeTTRo5\ng8lDcfrJc89YRbDZbMHd+3la5vPxpR6sJPxdYJBrJ8a0IpzDY49pR88nP1hf\nPLJUOzBFF4PlCxjYo9PkiNK3zJ9b7P+3P4f3hSDsRZy516sTFZXh3uDkR2rI\nurNIcrjbz8mGYqTgubu5FTVKsskI+rhIXB4dce0lPsa1wsl+/vOpBrG7e89+\nv3VMqMFyoN7gtwSRjWQRW/nZWKlDXO7xtbwQW2E5Wt0PPwpxa3szTtj6W6TA\npCKzW7xDvGqH7I8mRdRdk1qg5K4DQMv/aQZ5KptFGneRvPJh5fOm8GjYhPkK\nZZ4/4+zrAUxD/aZgQxCxyb+9amixOtR83P3BMSonG6jCC4xEe+sK/99JNUlo\nLcK5DM5NWAPYPwgMnDMn4SkSBv4bZY3e2TCigsGKSoQ0g2qNMiMFqt0gHwdg\nbUYwRvJfII2Si/0BQB6WiI325i4YZgo6KR/fRBq/l9nznbEfcgAtXGDE5K+Z\neab5\r\n=6/IC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARIqOxboRa09/y7VHnNetdjozCFKwKdOb6qGcne+zMWAiEAwQLMT4Wi3twfmulrBTv1LiixLd0awxN+kSb/iCCI2sY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.14-rc5_1555060841562_0.774764836540915"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.14":{"name":"@wework/react-floormap","version":"1.0.14","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"a3b5abd00ef0a9bf05b7f4625cfe0fc380f344b1","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.14","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-PqFEX3LMAHTG60Ea9ClEptBnWGJ/S5C7eeFBK3fOXfJE0r1g8XfIASBUi4AXo7s01ymQn0+nSHZFG+b64qwonQ==","shasum":"404dcda4a2a1391cd22474cc778f12342ed56c40","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.14.tgz","fileCount":216,"unpackedSize":1204544,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsFk4CRA9TVsSAnZWagAALHkQAJ/lThoPfaCbTF1tLK/G\nySNpN7Ah8o0OaiHHYAQIrU7tddPYGz06y3d6x+hCp/Rm3P2dkva4W64DK1TF\nh4gJGHJWOnmfXcfcuYJ+8pIFDv5H+gpbXug6VHxpze2v6djPAhiQt4eHDkOy\nP4HNeOxAixTtNUh7fguhUN09AcdARiN/k/JVKjscVyZQnvx28zLeX5mrx3vb\njpIvEP3B3Maqy6nbG7J+HKTtDNTAAcRdv7gvsNzpbtQ2lQiF0g1+Ol3IzNFx\niEBZBhRsP17M5R1tk3VH2xwOSmIO84Djik0dID89Xp9JDb6iWfpAGeF+GjSc\nADH13fY/QhAQMytAPG0RNGG0bT3ahDunDyswWhYLI6M3TuFKDgl4oK5Zb5A1\nV9+Mddz4hhL9v4n+JjZlpRQ0Bx7B+blJeD9edahb8UKXwpDNr82FSY8bGvX0\npEZtMEwtHD3zDAWpBRuE9XCtUkDYHuu4EfYcZfkAFgS7waQ/8IBoBRDJ5QL1\nELLZGMH6a8nQ5DBWat3c6qSZxMnbSq54SzEEU1KnOgb9x7b2FvEfyb62QNtN\nsxRF8KEHceP4raOj/uAKkGaxMMHi51rFH2HYydyS80E79JCX8Rm+6YUV+1G+\n98/73TogdEyM287+Dum0rOzUyOmyMJaAXyApmpGbW7NnA+IpMCeGbFjDQNGg\nhSIy\r\n=ksYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP1TyF5IqY4VIlrGegvxhIAUibxvY0GHBLOjLZPUkQYAIhAIQlfMO3TyapU8OUCMIuRjDT3tngNLSjPwAjWx2yTZNT"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.14_1555061047517_0.4224070617920139"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc20":{"name":"@wework/react-floormap","version":"1.1.0-rc20","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc4","@wework/floormap-sdk":"^1.1.14-rc3","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"d0dc564448f55a8cfcb416121a7dbfbd7fa7fbdf","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc20","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-YY3SHkOchgYfKZZQsGwkzj7F+RG1QqdJfXqi1G0Ki8sSnKYvSUgvD/dOKhMnZdlKWNK1eWSWZe8dARY5FlSd5w==","shasum":"a9aecfe9fa63210b46fb1cb9fd525d5d0f654a95","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc20.tgz","fileCount":254,"unpackedSize":1482005,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcs+hzCRA9TVsSAnZWagAAPR8P/2PtPtt/VE9fPKCX97+w\n6XpJ8pKe59L+MbQhQPcNUOyRsf/lL8JVj1XYAl+RWuw2gHYXmd4RuXLzUZ4j\nSu/BAT1RZxnXNdgi7IMMMLlZU5GQGVyynLow2I41Y1k4BFu062j5TIaJ+4LN\nFbHcWiUsckcEJVoUqjTM6qN0Qyp76qhRQGljg6GLxJjZMxF4wygMhsUhRWEt\n1B+xLx96+QYk1tnPVj9Ju4Iq5Hwl9O6HcQSaJ+1I+MglDPqOAul7vT8B2pEX\ntFYDxd2Yd36tFJIuwQx6uSuXFS7NKKiKWWV+koh9CgFyLdh2FabVUP8C9nfY\nw1yhR4pLHYJcGMW4yg7DRnI2z/n5BhqrovVJMsFvOZW0JzMn3HF8L5J+/QdD\nSSA0lURdEeI84+4t4zyJ17k3vCP6bW6WF/XbIWNunPrl0J7y1aKHx+Ae41Xs\nJeQQ4SpiVr/VMrXkpIV77Tqk9DtWH+1U/LGY4e34kO76IxtBZm+VaN44J9PA\nFwWe/MWWJbegdbvaMiAFMuJ+qQ80w7Ia9iGnZAc0pUTp4kXXK/fyk6hadygZ\nqgUzYiSunnCwQ/SdKWG2gs5+6d06715UnXygIoPkldP2UZo1LytQ81C/58L+\n+30xVjMYjC0Fps02qWH2hU0j084jXbpTCnI4t5P/982/YMaz7pibrYchZHxb\nrr9Y\r\n=x924\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWCz8+tkRwPHXpdQeI02UJ7UzUMIJvkyDKNGkWxgzyRQIhANA5/ccIFpH18SoM8146vImaw5A4qD6H7pu3OpzNfpYY"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc20_1555294321877_0.08141924701525438"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc22":{"name":"@wework/react-floormap","version":"1.1.0-rc22","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc4","@wework/floormap-sdk":"^1.1.14-rc3","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"31c18787cf27b1f24559446f47a66ecaa783081c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc22","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-qr8rk1pPyqQVH/n5WI0Yinecto+ztfnz9Hw7Yw6Ph3D8e9MeSqWWG0H1siS4J0LG8XSu7bwqsYJ40hs2m7+Scg==","shasum":"340168e010bffbc32e3dbd263de499e9843143d6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc22.tgz","fileCount":252,"unpackedSize":1480418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcs/gxCRA9TVsSAnZWagAAYC0QAJNhECC6BRFsZPGWWcth\nggTOXslGCatJmh85AWTNr/PR2WF6q+4yuUZNgb85ASmmEUqMi6Ho3jBDbPsi\nNW1bpRRW343hN3cbaUB/V+vdHctlQXBfiZYU0KBrt+o4q1+3Tp//CZHs6fwI\nQWiDWLpPcPW25wa+lTe3lwLugbP7/NpmiBcy+LlcpZ+j6tGpSMAbY+/8vAjw\nNAe0wUYUXZn0ckjYLBkxYh3AZ34udLcl/mWNX3h5Rqe5NDCDEJMt18D4atHH\nGjZ76gS1nCW8PzblGFfhTKU723kl0zD3yObiR6MHFGI0SsZ02xFxJl17WAFI\nHRLplQPo3TguljUYEQb0vcPGIFmgMl9mghoIpOdWvBLKY5iapqK6DdxXI+de\nA/BDlDY1StbQ5UjOoIGRQ4hws8VWnuvnSGnSwLIFUHYAgdrX1cwfggIGWHku\nigSpSrNlSEqmr26+xEJ3zbJAS2vB/pS5HHt6tJarohS5U0u4hMffMzDokWwp\niMVHfJDt9lGw8L9p7n9EpF6XHMORi/OqcvsvNBGv5fa6QxZ7YpqAUvOx84az\nEDYt5ue848fpQp7qGewf8wWw6U5zIoNfrXUwiML+l4/ttTpY2F8vsH0OK50j\nHs2NN/RTM2z8JobkyptDXChe23/MWNMHOzw4oUOkBa66yC2JxyhrfwnoxMPD\ns2cp\r\n=66nD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC51stKRM+sBA0NyM03bnizuZPEig6DKns6JDPgVWqWrwIgUZ8BhWBjnXF4rNaFgOuY3P1PHFVxZSBDuPpUZpvr61M="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc22_1555298352145_0.2170436051072131"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.15-rc1":{"name":"@wework/react-floormap","version":"1.0.15-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.7-1","@wework/floormap-sdk":"1.1.14","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"9647f8d727438e54be51495b8764e2598d792c25","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.15-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-LKd3ajMKtcdxFPfqHFtL6nEQZQym1hUHJBM6xpQEFuXPnHoC56BJFCh1JU6c6FyfOrb0NwkI9jO1zIUqx86S6g==","shasum":"2631e152c0e25c25f93bf2a78ccdb44d10b88299","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.15-rc1.tgz","fileCount":216,"unpackedSize":1204554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctCeyCRA9TVsSAnZWagAAe+gP/RjQ7qjnnMRW/ZhniXZJ\nS0PKKZ8RglBqssggySOP39DsawcxD3HcJkkDeCpo1xnnw6+okjlftHugxnua\nh8jPnpPgQzRmcXnHLoSDxohPvzn3vR6eSWP0oIWGZgmpR7khcjkD5gI7C/kP\nOmrXmnawskGZFhNIp0Dyuc0xVGp6j23f0KSXBAMWGumCAbGskty39w+Mk0Ju\noHYj8FtooPS74DKRVWx6v0WGMrK+Yupc7fc1rSgiBWTtqZAKUI4tKbQ6pXu4\nZ7ZA4TCL7JqXAmwku7/6L4mrHtFho0Ab2ONalv3w/XkxyTBS3WNKngogp5gM\nWO86isto21t06OKIqjIPjthBTIAdtOueuQzEpX3bdDNW505KK63M4ubo2oMk\nr0LwlLqOK6WiqmUz5nhJE3hraj5Ws9sihZh3sg4pp2QuA0s8J7v2YrSd6X23\nzOfypIVLYEeTu8iYmes4P6LwSisUVN0OgYkoVs6zKErsripOXVTHoqebWEeF\npZdk0BvF9Z4ZJCgRG7nQY0MnFvhq/hRPlAibs3M26hQikaTLdEtrLAL8jiAa\n3U0BEuD3Y+e2VHf/8wVPYsxMChdjoXT7gp7bi9RO5rIxFD1Vx8TUK1AoTnan\ngDfKm0OFG7DjDZDCRCrsNP29cyN7FrWGZOVrOZhqPfyUwAhejHPx8a5I3LyD\n2cFU\r\n=yKhJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5zGdzFlAc84ch1c829skJRFzb8JEDzQfihmrbK4r1HAiEApLOLAAVTA98oQGnZlKI4w9/LnTYvKkoRaL2kDtmHuFI="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.15-rc1_1555310513115_0.592161749659972"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.15-rc2":{"name":"@wework/react-floormap","version":"1.0.15-rc2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.8","@wework/floormap-sdk":"1.1.15","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"bc24551a15ecc6f1c90879949f0c7ce7a96603a8","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.15-rc2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-RFCmv4WUbM9zvozo/27FRqHbRLa3GE57x7Groho2EdesKec8aPhmMd/ykTm6duF9B9r0nqYwP1VhDgpG3FoC9w==","shasum":"f207414d023023143265724f69db4853cd65b380","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.15-rc2.tgz","fileCount":216,"unpackedSize":1204552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctC7eCRA9TVsSAnZWagAAtS4P/jUoUI584BpRVahlZT1G\nh83kDbm+kFDCBAL+65PfUwgkyi+WNsoauc5ngHw6iy1DOgKFv9CxP4ee8ZiW\n/VybhOxn1A17T36vf8CyW3Hr7TCKER+3zXfAKt4Xpf/s2lWESap4bqvq8DAI\ncBhW7x0YjnHv58mURw87bQwCnqkeUs7NMWfuJ69CFofCbS09hqkBZyOPExwz\nKzxzBx+0lIT9si0yh4mOiYUegOdBaPUPtdefThTh1wPtlssb94Ml6pYqjK3s\nIXCuGfu0Mnos/9Uk+Xl1D8KxUBvSWhjVCu+h5PrHKk8BOczq/tgNXYaJi7sR\n8SHeW4tLtBsbF+HxeuKDVOYev8Y4ReKCK/GpMs9MooDms4AyKoBEQEJHRUir\nyt2J/tQcsT4HkxBcjt2jMZMRzoJyaRopk3Pl/Ydtg4VVKAcN1h0mH7fmZZx5\njghTyv6N8v5AEa5zS4E/fp/F1O2ktpOwqZCG0hrQQ71XYR8HCPs7L9NNmXMu\nVcACMV1mo9SDyDJ8Szuz9+SBy8FF89YqsZuj4DMIVGYvArs1CzAG5VKzNJXU\nUttxO6fnk5kmfKwIilmRx8pUdE05VeJDvduFGf+k2OSIO1OULbcAqcYqHc56\nvv8BKVAmGduLkbxQIZo9SttudjWCGtaP6GnmcTlbcR0iVIGtlXLfWDqWNx2y\nW4sr\r\n=++jh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEIqqfi1tt0qXcyJQGveTcWHjtc0NSySfCpi0UlLKt8gIhALbveENXBdkJX0u9qJkzzcTQmyFTHhqcUQS1jsIgUuwc"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.15-rc2_1555312350198_0.9890827839055123"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc23":{"name":"@wework/react-floormap","version":"1.1.0-rc23","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"^1.1.9-rc4","@wework/floormap-sdk":"^1.1.15-rc1","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-select":"2.0.0","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --single-quote --write","git add"]},"gitHead":"176a6f8c8c48d1e5c56fa3e8e07dc95966f4c1af","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc23","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-Hdu7uX90UEWpaiX4mizgy+pzQbtRRdcN8FmTDs4HzYK3KcloFjp482iA3Yfe1ftCTiuNwFnYgibFS/yIrm7uxQ==","shasum":"c2058e0a35696d388d1052f397575740007f6dae","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc23.tgz","fileCount":252,"unpackedSize":1481083,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctC96CRA9TVsSAnZWagAAbNoP/3R5FAyCZVJ7+ONv04x7\nd+J0YnY/xWpXvikc+cYkcyhp+zrFUho9dD94pWYQvgmq8SH3Qq2yAWYfHzv1\nvT7E2+lLnhsNRfiWNHgPrBWR/waifERjGRuDok9tlTcjINjdOQbkO6Va/apL\ncluwFE1UXAO0WbIpBKOOtiIbS0uDZiDnK6G27cCnrun4YGtfnKTGcrnf1yfg\naakouaOKF82UINucpCI+zfZedmETTRcdFNFg0rXj9/TRa1rTez6hNO2p+3zH\nBjDXQduRNDXppiRsrrEmXL3SvB6Q86K9tGPM3E/jSmdh69JhEoDqunRIy1Lg\nhpodQr0PaKCaZRmcMdGxJjY0kvv/bAyuhczSAO7GOxPo+ASO6y1/IUwR3spb\ne37Pn0jNsS4kEVMSZ128/ejnG2bM6P10diq2FEt0FOqXZbHzvY5cd/RXFThy\nHCk3eIgaqyFBpKsI52k0bqguk/edSzDCaX0zvLE+o+8O6I7F6W58OHt5fQo4\nWhSVI9mzf+stfpczzGl84Vxz1YTzP+4tsOt+X6g7vmL8CqniD6k4OoYOoy6B\n5wLldKTTh7wD8BR3/UmnaQt/AGWjn84YL4G0Y502NE4BxbqsElB+IhNOwL6C\nlL8oVbdpMRSsFHk2zHr+pNbUvtn7HA8cpxOe8Z+/GcHEoTKSaKCgdwBjX/No\n890j\r\n=VpA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmjpxeQd/7RKWG5jX/KMbw1wpwa7fcCMmIM7RBrjVfvAiEA79us9nRnxv4wUZpIybdtG0F4/vcIEV2VlnPVsoXQKps="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc23_1555312505419_0.8465019925788055"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.15":{"name":"@wework/react-floormap","version":"1.0.15","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.8","@wework/floormap-sdk":"1.1.15","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"fe3c34bff86ab2dec02afb8fa2559dd8abb05c85","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.15","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-+zb/jXx9BD2s//V/xVVJA+bXRV4BjVBUuR6tdR2Yj1JHH4KuBtEdYCPIFImQYgl5putflxwRm2slyMSEj2DJjA==","shasum":"e25abd9b40da9eb7067a111b20fe1679009d5b6e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.15.tgz","fileCount":216,"unpackedSize":1204548,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctDNxCRA9TVsSAnZWagAAVSgP/33y4nq/kTIZL9AGSUij\nH1kg3pcaigLI4AMmFSbuNVvkFlpbF6BGD9qIz8J2DqgUVSd/nnxsmv+ol0KZ\nIuVrFl+X+MZIDmmq9WCQfeJX8z9GV8w5E0L6Ims1JTB8SZH7lAJAd2KfOkWZ\nr1uRwK/FG42IWI1gdKj/RQAZoOmGBeiyCYdID5dViUGipaHt8g663DEO66yq\nQXVssH5pQVR47VTfugODS3rKWDnig8rxO8gr9UJkJwXTFSlMemHIZmf1XFjZ\nbjPMNedzmoYZrt/DsVncQdy6e3UkrsTPKVS9EPouawV2FS1IR2OcbARhJNz9\n8lDG4t7llEgcNH9ZXtP+sdU65Du83njvvmz4BpS4nUt6LuE1hycXDq3EwgiD\nccCql/8Izfl6J+fsQLNK8uytfDAXY3oX6lJ46C0BUfKb1zVPQeVbBZ85j5+r\n5vik2ZI3YEUL7HjT5RvC+gjyl0zi3o2JDQ8sX4O0lkBEoaUSkNxcb1QH307Q\n5TRmH7uZg5bOwKyFakM+CUd1/oyFNpj5CHujnuq7N1nLxpxrxg3q8sqnCs91\npXrzHkFryiGQZvEe6/k8E6/tCq/8ut/MpzLXtfH8OFdBwa0AnjpyW2rlBaN5\nMVaKDIuqtoRNS5+oSroc3p5VjHx6H6FH3bh7fzEL48VGXbWDHzXK1X5wDWfp\nN2PP\r\n=y+Ia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdOaFYvH2witBG1Mlb7rOhKmQ01IQfgc1IlhCK41YOOAiEA1B9bsAv0h4Rht6Ho/ZeYXF8Pqw0G4x3M2vuVVplK9OY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.15_1555313520718_0.3480872879341117"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc24":{"name":"@wework/react-floormap","version":"1.1.0-rc24","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"^1.1.15-rc1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"308c08b51fc373d0a5e3376249533ca4f9714ef3","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc24","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-HuMZ4Aimzg0Nr2cytMwhojyBpPJEeAlvbbyv+QHtBElVV8lapD7Pd83dqu4iMA2/PeJbMTHOD4HAlJNWTjWGPQ==","shasum":"b494be2b72d5aa6e77523cc7c67cb9b5ad6372b8","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc24.tgz","fileCount":16,"unpackedSize":55309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctrqMCRA9TVsSAnZWagAAuO0P/1J834oEGlhv7L1peI0y\npj2vaM4g0hGC8olGovaP1qk5fes3MaDbXTL98MMvciYSzArrdQltiSvI6JC7\njRMvUNvvU2Q5+V3wks8HIp86LPGP64ghN7wqx9gBmbYEvDBIaVPfNhJ2KLAI\nqEpdQTHkuwldU8G7CJtdoMdOJuCjV6xauR5zkoHBxB1TSSstdfOqqH71AWeZ\nUwRIJJsH1n6tV4WDdUQrKRMcAgXgK1jaBIie0cs08paIJqgm24PyhX99KexN\nvyWQHtvJ1Z2nonXeW7t/evgVSP8JUZ5msWJ5Pjh9GNfp0uZux+nRXNuui+9X\n7qPGBm7lZUfo4WjanKvacJrekJgdYlKIV3BDMcD7ii1OwGZq5kS1ANsc9VB3\nRDpDCy/gYudzvilZzqgyUgZwSGxiJKm6Ds8QO2PwYUrMdNdGrQ371MmOTVcw\ngpPHgKywAOn59TagV1n7M0TuY2UFz6phC3/Af5DfaKU4TQXSdDJcL1mpUwhg\nCvAsAoA1gNT5mLy/YFHfJ1FmCrA7AMrHXdjCdAQ7CskZZ6Kq5B28ha9917nn\nQvIOEkRZmSDLVXj2WQJ0R9o7nI2x+DcYZsQZXfGoJ464QgrPiVq9vBtFTzPk\nnCvYJ0EcMet3eKzhsjPDMA0gRBKfWf0yERuxzqwV9k8O0F3ooAG5y9pSPn9G\nMcB/\r\n=0hX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+LanYzKBduPabPQRQexvU52RKAh2k8OHd1dnib/NgvAIgR/iLCd9C+q3GG+awJt09M9BW/Nv0orOJFH06lGM4jKg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc24_1555479179373_0.10294327129473069"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-dev-lerna.1":{"name":"@wework/react-floormap","version":"1.1.1-dev-lerna.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"^1.1.16-dev-lerna.1+5a25539","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"5a25539b7c6772775675ed8ea6502fd76274221d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-dev-lerna.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.3/node@v10.15.0+x64 (darwin)","dist":{"integrity":"sha512-oU+Gebgf+CK/d+uGvXsfV/pEJ744JXyqiVas9ld9OPOEBqlE3ph20WHVmGnNmjlJ5znr6/Mv+7OLM13RRy2imw==","shasum":"389253dcd823bf7db133d6a1d99bf5d12bcb5374","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-dev-lerna.1.tgz","fileCount":16,"unpackedSize":55397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuD5ICRA9TVsSAnZWagAA7mYP/0h4PRS0WtJEPXVcU+sf\nKr6X5L49gQS+W2naHX6rZiwwsqSioGih67CxOWeIoQrssq+5h24r0tyJ8Bvt\n7ONH0lXDJrwqvTJ6NYFFasKFhOGknM9jw41BGD5dMgWnGZ9fsfwAl3as0r/2\n4LsZC2Tz4FX7Qs4QussS0DWHbKQy7PZN4kACBTj884A4rWgqRqOPwU5jbUNo\nru2AvkoCZ5M5/ZlB1wjiKYJR5jMs7osxAvMYXQonLzWCLw8yEPNoMzKLAYsa\nKCf0RMig9Xg2ytoB6YQQveoMKsCu4jYlANBdm6czen6rOpw1mjlh/Q8YsoZw\npb6WJG39h8oAnL6MPehHk47/XlvQ1jymMYx7eU3piNskodIdQ3KLFV/ldCB7\nnuVnrlXACZFR/1cdJQ2lk01L4vUd6oZS03Kjwp8yaWBBHqETnkRalxKsRZcm\ngV+mCSrUq4wVclYGGyNrLGvhQoUNQ1RHFccBYjErCXdCOogBN8ViAdas5ym7\nO8QnkUoRryUCpiVWgGJZQQlvXHpm6O6/4ty7AQqxgNKRM2sgzINeUM69rm+z\nfxhMq9PUW3RvORxcfxy6nybH8CD2iD31OB8RWTtInd81R9Am55WeFv7JSut4\no5K2c6krx14RlJGTmsttDwI4Ye9NT9PJQdWeZA/1rP2uuL+NiRpHw0BQ/Psq\n4EZR\r\n=RB9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4uwSKozSSrfY6juGqPSOgU+PjrXRX7v97yxIfiLlplAiBcPnz0R1G0CgF3VGXyT7fb7Enk4WzgT3Ckr9FRRSHd0Q=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-dev-lerna.1_1555578439998_0.26513290009677615"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc25":{"name":"@wework/react-floormap","version":"1.1.0-rc25","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"^1.1.16-rc1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"3708f34ec08fd8a626c4ebd75209c8d596731413","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc25","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-z6fP6VA9COcwutUFYpCZ7SsT14WUp+ws5XYu3VaR7hLhQgaUr5NGEu6ppcGecdjwY+ng0h0BScoODSRSDJRBAQ==","shasum":"168e24a61289579cb6264069709f096b446881ba","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc25.tgz","fileCount":16,"unpackedSize":54835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvSLYCRA9TVsSAnZWagAAJWAP/3Wa8vgiKYs2aiuHOhk/\nzMEL85KBq7S6NNv2NjqX2yU4XB+cXZEws2awp6uRff4X+tbp3DuTRf0MfB+R\n3GxvtfE8GgTowHppc6Gz8eHcb8m4I0g9kArplHSgIp1D+MxYmgTc80RW7dDw\nd1jkMGu+5Mal+q2z+ugNXFT28csPeD/A58BYeNZeNawRlo+9PM5FVhyiksLE\nAu1xnB+BinsGgpMYTBTCuR4HdTh+ymsCNvli94+5GOa6bMMz51N0NrQcEyjH\n2P4k0XAv7W9g1L+eDWRHwm3Ibiar60pN6cJF85lqsai7SjDQNg2+OBsMw3Ym\n5umuUj3AHPqggz5IM2bEAuY0a/0vyJzzMPalsVe6fPpf+bPFzM/yyYSuV7zN\n9pr/GQRK1TlwxOC1nVEU9Z2t3HJbTZJy2ZCJ1cYjbz/OpgOkHkSw0QLgnlDQ\npi9qTp2ERlAuO/Dppd7Gyv8ot6BI+3lAFgGqXXRRT+3b9wK9eNPDFD7lWPea\nNSP9bJ/4dZX7tZoGuIwG/oMIaR1LuOsq8PcSCN7ZzhXDUbo5Ukc89RgPc/P/\nUQ4PwY5GdlCuk1xey7K8kZ0gUyOKH+TVHzsbxPd2cSCldgbjquRl2bgQrpQ4\nDqACCXOcOWwuGgo4ljPJuARht45srlVUhqEF06VtchL2BzVzu2OstQOMspTe\nC2jV\r\n=dsI6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmNOw/4jt797wNiHOBt/4e7rhyn4+kbOL79DZtLwd4pQIhAK9IQdv7BCIS8qWVn8GdTJ7Qw07abRpy4Qu/I7jnoTC0"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc25_1555899095328_0.9810432047666009"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc26":{"name":"@wework/react-floormap","version":"1.1.0-rc26","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"^1.1.16-rc2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"16f160bef5b903899493ba08ac416c7c8b6226f0","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc26","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-5J9lJCAhpvIPrWOGTA7ig019+QzJ4F51/y4jsDTGiksY97SBPb4xynDg6xdGc9c/olLCRH0UJ9bilpDHLhMdQw==","shasum":"f571e180a9849dee51789c677b7476b141f08ce3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc26.tgz","fileCount":16,"unpackedSize":54835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvT2GCRA9TVsSAnZWagAAG5wP/j8Me+ZyVchgfT/jzvAK\nhPRS5XnBglK9v67r/0q5zG3jwRtViWmxI7Kkzns3K3t7bm0sV1PEEQJ1uM/n\n0IBn+OIOl+483/iF833VuFZ+Qkix0VGODkl7L0hTGR985euDUsq1LvH3S9W8\nE9ABHDuOGlvJkBdlG6sUrKOFYflVxsJ7IZrv8MJts1yB3mzzxNW3JuscEpoW\nlBg1fH2ptNwlqnVdzf/Y3FJbk7Im75QpooA02eLgOh5Bz0sioc0p2u95YV5Q\nI7m78sWEFy/8OWIIU1wjJWl79b8m6o6imDBIYuy9vUWt6zsYED8IR9HP/zug\nb2X7vzstcRZbiL8Ck+ElNqaqhJR1FTVJffz/x9MJ7MmrB1dqT3yovfpQ8TbY\n5b0207o2zCUBSHLv4wdXVvSIqbMdAMloB4TylmsdPA3p6jvRAqysUedO8Kqe\nGODU0RGOCgbapKi6qhB4ANQZ4LDpLNKMREgzFCzP7+a24EuwfVAQpRQQq6ca\nvkMsleUtEPt2yb/XVtoT8v/YAjKRUux6xq621FKhYtou3eyEqRQgX8OhQlcp\nQy/YIovwRfJ3nsH25FvmZ3ieYiZCgREBNLVHc+a1jRAVCSCrTpNxiSoj8/GI\nXpscXLRUkzAu8AVnSHRn5A9y2jzaxrYfLiiMjzxR1AQXSamaN3rqhIJrxuRo\nt2Va\r\n=8+DZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5TeaTo5VAMDVA9kp6n5FqFxwMQWEkAG65FXo6CbUhYAiBfLP8WxjiAvNiK79CGcumVbSk5J7P83x4RtND18qO9xA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc26_1555905925768_0.4265201170824615"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc27":{"name":"@wework/react-floormap","version":"1.1.0-rc27","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"5414d3130933c6cd1dfc5d9420922576b795b88a","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc27","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-RK7gszp1yuEf7OmcIKJaLuTq5odv0HfblufmC6QdB2SQoK6cEyL1A7aQnVo33QIRXt8Vdau4B2CSW2hWAMxYKw==","shasum":"80b068a06c84efa4fe099ae37f37d541f4ba68ba","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc27.tgz","fileCount":16,"unpackedSize":54834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvUgLCRA9TVsSAnZWagAAwZcP/0u8bgQeL3NpuJ/AqZgJ\nXY2V7h8lqwnpKe5GkKSSIRKLTdLZ65GmF2rLoAJbVd/9nPoP20msPs/MNVLR\nC1PoNWVIawi2b/vurvAD4OpKQNjhWb6PNy8VLAU/my4bKzKiWIu6YspYiIWg\nx/0u+DKlb/fpQMs0TH3twvoTKs8gF7oSLCgJlxdLbwmUat5uAJEHt3Mt7NLz\nUbL+mMX3EyaYd5Yb/uXiCzRh/+ZYtBCT00jKsyYD0XMg9gim49vqadtekht3\nFMGV8cpY5EgRMLl67R96VC8sfyEPJQURvZWNND14lM4yRb/oADYddrciuoUX\n+xUuVwKNaFZvlbSPp23xbGwrfbKDN7WT48LRVmMPF867yR2fIJj6yk6Rmo6v\ndXGc+/jefEG2Ruw4HhW091/1jWTi6X0qqX0A5nQvIqgLix4SHAyycIoa2pNE\nPGjhTlyw0BNvRWIPOoFOxY3OiXR+DILU5EnXeiMj2+iV1gH0Uw+RhQZfKRoW\njoncfFFZdhpgwAPViJMvm7mSTtpgI8SRPwUI952eOvQFkleWNJ8pRNJn6jT+\nmJTotT9NZP1z5y0oZUtafGvTiwRiPX24u+n2zeMl9kBMhUGrGTfuIPRv0TFI\nzkg3U4tzAvDw3Vh20Lvv0yw9OR/NDYRdEby9LhvxnAJcwgdISKwx/1tiEn1h\njHvU\r\n=G3rB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPUm8XXN5PvSIRuhEEKnQj6DQXQjwv5QiTwZDdG3up9AiArRY+68xGUNippfCtb8Fq6h4/O0UESr+NRhdH6h76lMQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc27_1555908619205_0.9227411486233503"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc29":{"name":"@wework/react-floormap","version":"1.1.0-rc29","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc4","@wework/react-floormap":"1.1.0-rc27","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"b9cb0183cf12b1e234faf0013e630a185a943a06","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc29","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-+gjSS/S2XqXgBxo0+XHQhBMkCpjUKrchVwYPEiV+yIVSGkSv960IQOkS+vP9eMinn1gfFKn+YbxM5XP5HcYGuA==","shasum":"475173f8af27a4596d61a259d1751976732a6e5f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc29.tgz","fileCount":16,"unpackedSize":55222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvZbjCRA9TVsSAnZWagAAL80P/RFUDioHUzCdC09BTKDw\nXYZfnANjO/ordojAtp+ihl4crLnHI5t54gXjTEuhXgFjJhFvTfflfMuKysgb\nlHjJnuwX/z1+X0plbVPLKjVnw0MMtUR4sN13I5CR4Qfm8jR3xIMUtwPjtHO2\nRKnSglmRmErTpYqEStS3JlbL8oLNuDDQSdXrP2SQi8gAX22344NmZ5bMyYEk\nVZ45azilldnCdbLeYOp1Q1B0rZZhJqLT2DZqxw7NT+0/asrXZIR/FRVnBqIJ\nnPO9t6/WzL6Oy8Ta8fLuLXK/dXBwHxpZwu//sPikDg5TPSvaN1P4aWOFzu/C\nJA1dtLaJNT56QyKNTYHgjthX47sCGfWD36Fm/8BzZ5wNgxlEpz9JH2KMs8Pu\nBwmYctGy0OICvx9EAzTtKhENx6Y4Jkuo/+BZgXV5V3dQaaLU59VrVoWt8Ecx\nRM3rvgewApS9/jvOHdEUJoM4HB8us0cQ7eoHiDCbvdSqHjOy/kd5RuyeAGkY\npCAugMPDlnat9uqn8S8xCylG4+dNec0yd+W5W6kDJRuC1WrNiqBMquA8nr79\n+TI2ECKyYvHxkgZd+bvfGCPuTZA9o1YW6ZEHDL6dM7K1K1MEp/Z3qa44ntlg\nHi9/MFVgJfF61vmKIvwk5oGVdqm4M0F/7aHwxNaOrBOsjthMy9s0nnHGyxTs\n//mP\r\n=FZGb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdhiBh7Ovmn5ckWYyYRcNa4fThsTHO2qiGWw2FlacHHAiEAtIonOyFOgqF5JzYLeekvjutkDvnyxpVa1BHixQmIojs="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc29_1555928802803_0.10819059966702316"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc30":{"name":"@wework/react-floormap","version":"1.1.0-rc30","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc4","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"12ddd9d26fd12a2e3ec7e30eb6449be66d97ed60","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc30","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-2xbCUpnxT6563PUAiPpHJmlpWkjaxD7Vgwx+zi9TIXnS/4E+WgPgetyXKKHGI8sB0EEJu4gdse+/AA91UKVR6g==","shasum":"046b90b63da2713b248b20a5f6df4d479b78673b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc30.tgz","fileCount":16,"unpackedSize":55178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvZgpCRA9TVsSAnZWagAAlcIP/3GHGgqvK6LOXcyn6efn\nAnfsxbpjAwDL5QF/gzP+gmaV0vraBjXjnW/S73J56Euz+A5CUk1QjuN4VAaf\nuH2n8P+lz1eEJi7mFy72DDiALa+Yq7hu4QBXcBj7V9ykKddXQBeNuw3EFt1j\nv3CEnjWDJFwGnNeZr/3hS0JZ4k0BHTsZh+Uw+DAA89CAP6kbDRQsFw7JBJKu\n1pjr+RJN8ui40ilYUDkVGtcHqVnHu3BzAudTJTvVso+AeRnaWLemHW6mQPpG\ng2CMwc4tiTRaUjDvc7icxvwTgvG10Dygl0LJav392M5eYzfscdQC4cLVWiUG\nSxPKTaWBlqCavzLozlmEUnEbJjLqyYpMb7YM60mP4AIdNV6HX1zM8y2iQapm\nr08EGJ6NhcULdvCIMR/wtbTkH/aOx9NsOmnqa5HiEgX7fCPaJlNMN5osnFgQ\nnP8YoXBa1PLUCJHcKkN9Hv92LJvIzUZuQy6YTZz/Uw7ok7UbOVbbkpWJ10f0\nXpkz1LrsFK9c4vTpz5krn9TnPY/eetpbkpJonS/8sLWWtseaEkmY4E744Hjy\nHzwwuvwogzv95kKFWaSwledB6kJC1gzDOV7zOIBEIur3nLFvbAQ4xL9Cn3eS\nE4fvZliztT5kdu4JmtIVwewHSMQSPF6/hxWRPuaP6lqCKGCD9Sg/5l0ov5hN\neSC2\r\n=KOge\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/2ZIjxVQblCQhxtCoPHoufj2BfkMU2joAkPrpKCrUNAiAxcNc5YkvvwTrN9sV0YlQnx9/5ZVE1jvZUm3bjH+H2pw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc30_1555929128770_0.0931081952150048"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc31":{"name":"@wework/react-floormap","version":"1.1.0-rc31","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc5","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"0ce0bf206355d3021f8ed9d08afedbc7d46ad0f6","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc31","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-KddvZRAZnHvIA2alrk1PmiE2xoh1r0t06duz5ggfHOTlDvWbMgJ0nP8e4q0x6FIkBgQX9G9MHkSqprtZE0XTZQ==","shasum":"a90e4e389168cb2a85335f2c01afd12a5555ae23","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc31.tgz","fileCount":16,"unpackedSize":55178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvtrgCRA9TVsSAnZWagAA6UcP/Rw1kfFUSi1RhLt4Fz93\n0qgfeF+uwkVCqpieTduu82M2HCcyZ+DpS8H+TvhzAnEO3Cl741Z+jgA505Hv\nJ9eP46ED1kMLnFK01sDHaB1D5REOb+J/j/TFy4rLGEigFFcumSJmrcksj16Z\nfJj3P7XfiOm3uVPLCjrs2D01TNals+/K2+Np91gOKXN5wYqFEdcgxckr54rT\nmbwcW45UgE400064KfWidK3m9RVmosp1RWXWEUPyXmmN+uI50N8fzfc0CKSD\n18CgicgFuFWnvoRGWIESd95qQYNFsjjFF8CEoiKnl/UEB7TBnb+7ZsHTe4Iv\nxxdXrXlZGBpqXq5dE6vuDfKfy8OSfR935qtMA6euakla8gvTDboAUA/IBCsk\n4aUG6/dP315LfMLFCiogzIePxUVSKX0Dr1p/9qd9fua30U8c7KMGDA8Fk2S/\n/rBTWRP4w8ZDXYPmjRwrHvhyuVa9xSWnZvwwNuBr4z4YVpBsW47OGJ2Op+pb\ndc4lYkl/xW5q7e0VIKzwPMJIV9JErQ8iNmR5VdN6EaJiaXLpd7jM6ZVnXPui\nfZDoLUHtZpZK/p8lEN38U43n9Q/rkzid1hQfjZFYaFGa6jSs8FH/KsjkL83e\nKe5jfGhBjNXnHV2aRY7EYstSpXdr2GlJ+I/1LIpS6xOCHtFIotDOA1ZLvj5B\ns4NQ\r\n=MI67\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFbk7hfULMGcseeWeFSML99hfCjVAteopZzr6HljL0JXAiADMxGkKzYy1YnT15Ao8Qy7s3v2kA1/HyKkSKT5aORnQw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc31_1556011743797_0.35301981619909517"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.16-rc1":{"name":"@wework/react-floormap","version":"1.0.16-rc1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.8","@wework/floormap-sdk":"1.1.15","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"3c36d745ea784eb1c4de7ce7914d1e769e81bdfe","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.16-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-6LaO6uK9Rbe7E+a44KoMDyu7iUfxck+GGtm+bZHyBbw043ttd5XDesmZkS/HAbNPvudEQGJQpjlvhQ3DAekjIQ==","shasum":"3c42144f9bf0920e2a2fee7dd6481220b3578a73","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.16-rc1.tgz","fileCount":216,"unpackedSize":1204554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvucoCRA9TVsSAnZWagAAgf4QAJnr37+Oslonz51Hkut6\nI3qcGlzWCmGEZJZBnhlhLPDtUZKeNn3N/roRf8KNnXlyYqYdPt84Dd7rjKNN\nwp9hmQs0M+IGyRGIJPisibZhUOjOQdz04LF4yXsswV10tcabLlHLZbSOkv6M\nnCF3NhzYcFmz4GrKS1W+O77II3hlPwugGh0c8vJbA8C9tf07FS9X9qTxGstD\nXrxMSF31Es9PKmdDPU8Bn9rUO3fBnopIeZQeW7Z4RGElshyw860vkDuZ/rgW\nDFv2tIfz7E4YjFhvVOMyTHJYXkPYoXtBnLdgWGE07x3A4ZFVOBhf+O1MNXIY\ntKGiwKpj09TooE4eFXFQsm1pC3gQVjsXcRZePr7aLBCeSQ5z7rt06BgmYuk6\nji5n2Lg30OkAR+GYI+3UTy5Zz84RM9moQ6qvwf7U0e8M8pmANS+qqkju0C1D\nhSe27AApAebUmFH51rsLNuyvhnFNvTanszmb2a/2ntdHdsFs5rY+yuxsKrmn\n9Z6YemLewCT84eCrixpIRIafsKzMvY2cIFAlWpQ4P6Ym5E9F9Sr4Ob8d7LzU\n13rsJ+nNBqVBfsv5G5uo/e+2IqW9ReTii3FaEPgxks03NezDYhU/RAeySNJp\nqGl09iMg3BObhfND+xDCaGo8lAkqLDg3RMzph9Iy4AYkvy1q73sEzh+Rkp8C\nxjEK\r\n=JjF+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDy6nilAn9FnzzQWxlXJi7Z2Dz17k7BcH3k1UvteZB7oAiEA5gDtKzf6jAHczi4BFM2cLZa/31Cqbg6D8n8p8uqXlAk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.16-rc1_1556014887369_0.9791113939530798"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.16":{"name":"@wework/react-floormap","version":"1.0.16","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/**/*.js","lint:ci":"eslint src/**/*.js --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@date-io/moment":"^1.1.0","@material-ui/core":"3.9.2","@material-ui/icons":"3.0.2","@wework/floormap-extensions":"1.1.8","@wework/floormap-sdk":"1.1.15","algoliasearch":"^3.30.0","change-case":"^3.1.0","classnames":"^2.2.5","currency-formatter":"^1.5.3","date-fns":"^1.30.1","deepmerge":"^3.0.0","downshift":"^3.2.2","hoist-non-react-statics":"^3.3.0","is-mobile":"^2.0.0","lodash":"^4.17.11","moment":"^2.24.0","notistack":"^0.4.2","pluralize":"^7.0.0","prop-types":"^15.7.2","react-joyride":"2.0.5","react-month-picker":"1.3.8","react-spring":"^8.0.19","react-virtualized":"^9.21.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-loader":"^8.0.5","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5","styled-components":"^4.1.1"},"config":{"commitizen":{"path":"git-cz"}},"gitHead":"80e5c0f2357b7abdd1f73a37a8657032ec6f9826","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.0.16","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-CemKDXtXtVJpCk1Qa6Br6c0U5io4xccYWXF4WYtMmqKvGN0NPvtcfCwajxLKuimBRmp6gLxQAR8ibbBfu4iuXw==","shasum":"e762b6205e6e9dc312e1856fa877ce03db552bed","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.0.16.tgz","fileCount":216,"unpackedSize":1204550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvuxZCRA9TVsSAnZWagAAbf4P/At7JhsuFKCrrqm+qkT9\nCrFOG4z6M26/1Ds0gIiJHFuc70AonQXNGypdUI6GD5No7xNO6EaHIxwZOKCU\njKDeXelZNMABMRiSxsbc8HOPU61qGlTtFS+0nWvhomC1zyR+SPg+o5qXA88F\ndlBmisNLB+N6StV8s9sb0hc+sbV3LsbnoKJsS1M6+WzgXupC7e3EXVl2ppQq\n7d8LsLt86cgXksao3HPrdkg1YR7a39Dh/tB6cPeM0i5zv1kGQMWq0DbF0MLl\nWnyeYtn5Ox/5HLZwSmV09hz5I7hSMNhOLoyevgoo7jxbBGkhOVMZE/9HqSds\nsbmK6RiZkU1Vu6tSGe1anZ43azGD8LDKZsEVCQpjGJ86luxx/gh2rB8q5pHh\nrca4DcmtMkJCDY9i7zFQhnyx2fqzC6d9bAZzxRTCXkrv2nZ8cMPdd90vHMyp\nPPV5tJAoKS0sRuuKoHiEP9XBLTVKKb2zLuPHY0jdoJGcjTtpn0+mpkvgMot3\nqB3E4LNDjx+0PFAhmWt7/pVIGDVbHOLJ9Jm5RLLYGwO0Ubk7Z6ZX42+bx7x8\nba0nyVSReoVmF1MEfrsVMpLrnFcMcKVe2RtwMpkRUUDZtnt+Gfv+jy+Aoutr\nW0ClKzqYMybyX/etiQ8vb78VPgQ4ZH49U50bPAUbOSQ0jaERjaJmGzbHR59C\nHFHX\r\n=p2HG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFurOiyEcp6UuBCx0OAiOq7pRfybShTAJrcOgZ5OpCE+AiEAg5JfY31FkIL28snu39mmZMNWBmyz/0aqZPl8EUX9mfY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.0.16_1556016216853_0.03172118555153669"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc32":{"name":"@wework/react-floormap","version":"1.1.0-rc32","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-extensions":"1.1.11-rc2","@wework/floormap-sdk":"1.1.16-rc6","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f6d44fd16e9f26158adde4d1bc76823b7471e74c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc32","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-D1StBDNWzMoHHTIYEa5e0fAH5SvdNLSoN153vokaInJCZxnKT8OeOZVSN77lKjDwGNvsqTfFLADuP7HYD1rEEA==","shasum":"2eef74f15b87a964a89afe0cdd35ecb6a532fbbd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc32.tgz","fileCount":16,"unpackedSize":55227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcv/5rCRA9TVsSAnZWagAAjV0P/0XX54r2hTislfRyg2/1\ncUnb8CfNS+75sKR70eFwHJ2jERM/3R74520qtFc74RWjMYB9KN53uBFKNayq\nXkhV7Y8SkB06UUruykCRC/xmIvNsIPkqTTLE0kK3lG0/cwvnZRwuGiT7Usfc\npzeaNmy8xcA7Hlufb7ldBJIuQuE8LrQM1I9KTPqdz3Kv56kqZXwT2zQtFKSt\nx/eKQ0Q+heLe9rKjgX6c24Us+ksPhIXZ7ux7x/71PaoAEqcb3ZlQ2mB6E+xz\n3p6Lje/dxGPQGJEb/X9UYt8vttsOOVj3fScmCjBSE5dFZLDZSVfn+l/WSG4P\nWi+n3jMl3iRIF3QLMiq/TDmqzzOs573ApCIgo9yld3tq3Vk3dnzMzoFTXaxn\nk76AYYeF2O2rdydvdfd1zyTwvAq/U+gfGR2E4XFxl+EBHcKNF4+knh3JPk/K\nEVBsqGD9Go1iQ3h1UfQqMxBfOkeAXf70dWA/Ul0gDR8Vo94dT9lFNsCOJOoc\n3I4EwoLi6XHzDExNWvZlM2EdpKTPR9WqoKpIQ4kT+rHfUyWnqjakHdAteCq7\n6Y7+6YmG9Ch72D/dUgDPKJQgPtV0hKhADrY1I9gHQTL9D/w9gCNVdzz42+To\nyEE7yImCtvMjRrsnOhxyKzt0ThG7EYGOGw1b47+JMTh1u29mNl5qug4EOYFK\nuUQN\r\n=3jVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDigd8BZfwyRnbqHfjwYtyazHfC5tB23Ji5tBie4/K/uAIhAMS6braR65Rfr6Pxniy8mjYUkmdZ5p/xI/GzNjVlJk85"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc32_1556086379151_0.870442754406318"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc33":{"name":"@wework/react-floormap","version":"1.1.0-rc33","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-extensions":"1.1.11-rc3","@wework/floormap-sdk":"1.1.16-rc6","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"6effa3b775647b48ee40f82dbfd72cfc179f33f0","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc33","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-W3pURsEcd0R9TSyq6lLOq+rCJ28xwNqgHR674Jt+HnJMHc7CrwslRT+yjTeMTjG+gCng4o6Z8ZSeEMIa4It+pg==","shasum":"989b2bc77c136c59eb555e9773511562da142b8b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc33.tgz","fileCount":16,"unpackedSize":55227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwCd5CRA9TVsSAnZWagAAeosQAIAaacm47Isl/RJ21BQF\n83vMqAs8wQ6e24qFNyI0UNAthfKMf9nbgKYhiCcPY8/orIftTa5J0rhryHdH\npAV64gBXCkuBWPeyaTaTcgy0lAkxpMslhQLC42+IMFrEVi/movwv7WOSwqDT\nyFQ9IktlSVSGmTt9sRskdzM/9teoOw1UXj8rcrzfwqeEowepnq2XFIeNffsK\ntmkCy10BpQftEwwYaKxJzyAhiKfu2+hsMKVZYVmu2fn7NBBZ6xhYBhuBxVq4\nsDUjz8B7cPApvW5PZVnmVXBG+oFgU4Lilo1WZAm68r6IWWSf4zwR84yWhfIv\nJ3vzslkfi8MixwiuAJZJxBSOIWbX8psn/3iet48C0pcI/OdO0rNCM4sC4Kie\n0DNVSMqH8Bc2LhwcAaKdcIBA0GGA7ChrfEEYPFGzM7qj8mvALznptC2MyMDi\ndvhzSycHmK3sPpCKBe7pNfOxrqmSTD75xIYv7ggtJIRTaYSg85LkTCKhyEKz\nGOSISC1vFY3YjUCIoXhgtLrJnPJX10bQXlEejaa6V4aUULHleh/eu+c3tpJr\nhDGdpU9ELdgmG3x9nSk8ORQd2ikahyBaeBVq+bmmVOKlmgQ/BYCKu9+ksAbI\nYZSuk7UtyAmS6vAacE0L4qCel0GdEsmNJpHYaRf7OQvvx12L/Gdyi7w9/QZt\n00wd\r\n=ZzXD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYwo1f5heCYuNSy/qYL9ivbHbZeeF1OhqFuLLHWVev1wIgDQCJbXg/qawM9OXUSlvrC6OhuUuk3eiesHtF1J2v2CI="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc33_1556096889173_0.2472766792270129"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc34":{"name":"@wework/react-floormap","version":"1.1.0-rc34","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc7","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"d26b7f2e122095ce5582572f5cbdd38f18d573d5","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc34","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-6ssxFQOQOWv6G7ZiGGn3cVqws4vOOfrmF6RIKXSS+JIleCwGS68s1n0qzb5jqCVsGdI5pa+NDLmLUGNH5dFyCg==","shasum":"061055f49e01034fc8f9c32b76242f56aa878270","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc34.tgz","fileCount":16,"unpackedSize":55178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwRcyCRA9TVsSAnZWagAAHbgP/1FeXAVEzJPEUCpwSn4+\nS8wM4z62Cx0chGpDR0ECQQtE6R281hRxYnpdvsbjMGnvLrBL/Tw7RIbCsI+J\nAKw0s+c6c2Mvmq7l+Pam0YFHU+M2e3Tu1KZX3J337hA6xQEGnaZkw+Wmhy9s\nDwf3Pn1pPImtwcoZQ9qPqL7wW4CBI0uWDrv0FMB192oOCGH5jY68FrwrTicz\nji6b73Cv3UysjjfGIvM/lkTNcvNC2+rTb4VviZMn/35xtVzIsj9WJpOKE04j\n/TV3oGdNGUptVA1Jm9pTqHQNktiSog7utWV1z6Xkn4CzLEyUkBOOTqNcqMcv\nPooUWI7bj3gpNYyW3TEbvQaBoECTn1BPCW5b8JctWjVeKtghLcTTU8suYLSB\nvuhkFJtBNWZKhrKZD9XUg1ByyL1T8sE1neNYy3GPljGu//BoEyyYBiNCOupN\n+LAlyvWFR1G8OPbcq1HqSXxbmg7w/EsYJuTCl1FzZuFLgbJTWhX/o+lP6Cuh\n6iP+LuhTh26imLH/Z0g+uS03zuEXMF7ZRy6OlYZrCZoKl6l7RZDk04kjZu/m\nt0qWeunuj47voV9h6YIr93f/gGC3oLrO81V2drUwDPT5E5C+Ie4eLM1yFpqh\nIjm0NKkKNOTkBqK+cdzBPQUQWcgr6Jw6vnW3A1/4sCXQKA8gg/hYxvA5ogKY\nQNMZ\r\n=4lxV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqpKpYMO6/nJmS5cvAPWm1sZQhMKp1+Wt1NHVn7Qq/jwIgdNgj2A4TGGUdFH/5Uc+FlpMlT8k4LbAAnNBrj2Fb0WI="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc34_1556158258194_0.44618531397305383"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc35":{"name":"@wework/react-floormap","version":"1.1.0-rc35","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc8","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"08ea391d6cb50d6c96dac778e51f1769e44fd387","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc35","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-+9m3jcpC1XXzKWzpn6KBhtHp0RfLzrie8bTsbSokPpqkMxzkPHaes90NKQrrmz2LKdVHuqtFUXieyzSTnhWZjg==","shasum":"6406ced308c7b79737aff8df85b78ec88c701abd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc35.tgz","fileCount":16,"unpackedSize":55178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwWZPCRA9TVsSAnZWagAAimMQAKFj/XvQZy0GFptHshQG\nFiTkcmpVDrkp2PWpeYMuxGiXhbRkGQc4DwyfLaE4t3N+WS+NHDj0ww9DDfYB\nSKxWKhnu6/Jr9PqsWCoEjo5Ye9iOGWAnSl6ZazMDRR8sbevSzGBNIGYfIWdI\nwb/PCai97NhwCcd1SKov7Kgv6mrmKFrARhA7xfqYUVUra+7kItl76MsdjHj+\nXloj43kqfjfFgBj6HE0Y3GtzqDkAinlXFmcreVDZXoYf0ekHqQ17Iou5XxHH\nVdZb4qBToZGnpN2VddjRoy4+9iLgFwiKSdeB/1qUsayK1ps7iSfrFkFlzCp9\nxo2E4dnUZcu4tpowbOFV3DVY7FMhCIJDxzHVxLCLSQaWcB2xpAhKKrgJhWnV\n74Ktmzjbj2sE8PTtFU2qpwxEPpCrOau6WN3QZ8/58oyEnjduaVRdz0kIroaw\nwuJZ9meffGfqPBw6P+73k8jJ80QljrdqQ08Qc0BB/LYY1uExEoUuFM6xuBQE\njP5iHfUGlXdA0aRjpjwc1y2E8S9l2QPjd4rEfVexhY54cSlY2NU2ZHNfEnUQ\nCb7xKPIxlDj3E8UCRG2wmkCXMNz2g9ZK2CUqm5mLaRepB1d67JuE7JyfN+cY\noXMiHv9eZLrFYCGlzYRwsMr3dYn///jcswOx5iWJoDlzqSDRsvdlQDbPAhP0\n8v4e\r\n=iojf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD5zUuLMPwTdFvMiTQYh/4NY41TV0y5dTwlynjvgI9bQIgDc67BBK65ZSeADsUpbdn3oDXi7mQqq5hBnmSzT4A9RA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc35_1556178510422_0.5178707759992587"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc36":{"name":"@wework/react-floormap","version":"1.1.0-rc36","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"e1cbe423010d131e91e4543f758e3db899b4db77","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc36","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-u9Ch6mebkboxb+8N/0oruZpnjplaqeZmRC9Jzed7ldgxmPFXujqLXmSntZ0NuDhrkTLpK5rG8IuiLSp1BN6Nlg==","shasum":"32f2d00cf35e6425b4ca701270afcd3835f4b3b7","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc36.tgz","fileCount":16,"unpackedSize":55178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwc9xCRA9TVsSAnZWagAArRMQAIa2393UyVvFkTqtnHFi\nYAOK4edCudqjL88ExgaoWspBcuEnbDar5pUTz3MICnflSPTG8A6j4lcyoxP9\nGwfpktebQzI9atxUhACucgN8e5ZRSEvUrDpFd3SX44TVorLP2FybhNMzxtH+\nuk87RxKX6Yflh5n2VeTkAECR0itVWzL/qhn0TS+/6YxO+wczcCNqFlJ7+hEB\nK6f6Pj846S3ShrSQ3QzwjDQLmxnH6jtayLWHiqbxQjQJ0w0661p/FMY0UMqF\n+EaX29TgNNUrWfkIfFL1XEYwT1fvNTpOi5FaUpljhCSUd465xTDHrHXqMdQw\nK0vmMAQnQlh6IGZizXcBXcMqTUtcPsVmTIgt0IkpUy96Eh46aZTu8J7EpvR6\n7FEuFpDYKjJH+x5ZqKNCrxI9YZLaOHoR4ZLxBLYkZKAuI0v39cTLda416qBz\nHgMTZ1kVgov54QNKQyptmH5+TDxVhyWwm1vUWFthMVrrfEZj2r8sEhnxgosp\ntu1rdigUrgEarFYOtSIHmWYg6UI5rDr7BK+lGNqgzEg7ujLt9oGhMKEDt9yt\nMKNCpq3Wm2atULcYd2JMqZGWVTmfHkax3F+0JfLiUk+wxpeO2sMvPsv9FXHK\nXjeNcIFsGFRzlWw0mPjsjjddmRx28FznmrUFBc6ULUOO+roRJkMYsK1HFOd5\n6WAs\r\n=GrwN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2d8qp/1vYX/Y5AuhMYyl+6k22vmv2FxkTPW4CqCFzKAIhAIwm4KXn8SS9rciIwsw0VDYQo1T2MwAbqvVDTsVWFIbu"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc36_1556205425142_0.2691945268616731"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc37":{"name":"@wework/react-floormap","version":"1.1.0-rc37","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc10","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"7ec24e1b79a685fb876b6eacdfa63ce50e711477","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc37","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-Grlf0RoiFepy+X/os1aQNrEjLv05eUDKaO4e8t3BxgUfFM3JG8JhgO5+wQtwhAzBnspedPjpApzlyp29UduePg==","shasum":"2c822aa2e94539cab0b4bba64766d700a99dd7a2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc37.tgz","fileCount":16,"unpackedSize":55179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwoozCRA9TVsSAnZWagAAF3QQAIgVxSdzqOZNaOy8GsXo\njkx2s2NKiIr05WjqAV/hvqPLpNwWl54mCqXxbiMSz+KTGNtYiw5WnouhfDbs\nBFfLbFFU6//0e2yzgooCMd1trmjQMxUjYUoyadGc0uxwFJ6rzMwqZ7L1MXYV\ne4+XYulnOQqvCpwcDi64PzL6KsP3LDk2iippH08ALRvkoZBLZszFpElgh0ZR\nDXxmtuFPaSoZiSirGPl9w//4rafW5QTAddY4i05UWkrw5LWksw15uZbzM71b\nl0oo5RMVSdj1fjDy1Rtv1bBNkC2iQagnsob8Ww2fre0YzvOQnMseo+P7o5iv\nqqzEeJkZFKsMNrk4TgmRITswyqmV+5TAJFGrjdsypkhh8eZeS4MyJUvPJoa+\n79vwqI/dF51NIis3szyCzsAvic294VDoq9ZkNNf7kB563rV05w+sxxbup0LK\n+qvgL0Oe03+i0sDGwgduXjkUxLCUrEZg3nZk3/2hTsvePJLP6qClNdfl3YpM\n0i+A73s8qZqf0QHV2szT+uwWGrTqHsdRfpX78O1AtBnEdbq3rMAw5C6tTTwR\nhtuo7u+LUJY9OuDdWqVPk7o5q5iGuK4Ajs0jok6GnEgWH9dSU/8UCV1ykmGy\nY36t88IZOKyKhs3AbqmTNfIzpkXWNsRNEEhLY04vfbb2qoSfhdcKKEenxdTE\niW21\r\n=NTxe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICChbNBQ3189vqw+gTsYYqzFEows+XvFYc/kJuM9YmlNAiBiPANwijrUsVontSf8/Id3Ll2d8RoI8wwMmg2e/umU6A=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc37_1556253235124_0.4412472639491951"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc38":{"name":"@wework/react-floormap","version":"1.1.0-rc38","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc11","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"447ccfc65a899df3d815edbf17a02a5e00c68939","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc38","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-FMibtKqHlWKV29P9XzQau/R9H6yI4xccVJl2FR2N5X4P/qoBFDOFdaKgdMFAwsOfbbKBmtgJn7XqFhye3J1Aqw==","shasum":"0b3f2c7a8018f2e6ca299ced5920d8340bcceb34","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc38.tgz","fileCount":16,"unpackedSize":55179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcws16CRA9TVsSAnZWagAAfTgP/jODOEJ63SEstST8BEXp\nZRuTSjEQV2aaeBMl1CxxbaO3V8YNHLgroBP/u3kM4/Dfr8QxQvOeE7PcZn5Q\nZko+qpCk8tJh/l6tnfnkAiqwfJWEO40DvIVEBq3g9cW6SzENgvBNFOTir0CT\ns9lDw6HG6aYecmRSLAlVjTkM/9pipfyMV6pYPcArkU/AsB5b5lnaINgnt/wv\nsXTKgktXD3cDD202Qgy5aqx1Wq1IthoHNSEt+9jDs5C3j+Fiaket6tg50J3g\nH6/fqgPwkrME0np5PPgLH/1GIvp49QcjQmAKvUgI6CeKYRQvawHES4Pr7Qhz\n1EE+rFYItuEk9AHkTWq06Wp0WwIeA5/fkgFarbPIhgrgN4tKS1mUZoZTq5rf\ndjQu0Yuh1oySINqkhFzGoxUe0EbjRaRyqyTwUQertZuyh2N0fuwwLqcqo3JP\nELykxrp5/gpgmQyUQArbFbkOGnbL2jMyxWz9U2x4YtHGKaKErXLPQ8v1tG+B\n/vAlsxWcFjkrTAZuI/WjLQKzyZ/xHeVna4E/Yp2T5FhIoq2XbiBHn++6pC2J\noQZgHvbWLU8pbp+i+znRxPzstwTxNKBKO0VIn0VSeP2fVhE+VUUu6gRFjepP\nIEjZYdua2wMPSqNlGrPZXWixxz0bnV+GoSmUQEu7J+htXx9MNcAN2O4HsUkp\nmbQU\r\n=7ZQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/pLVtTv22IccSXgg33A0d8asJnHXN718CBk1AGzPghAiBKz5rKc0lJOUuirD/D6X25kVxgCmhrg214LDRJRK0pxA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc38_1556270457206_0.29131550810299833"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc39":{"name":"@wework/react-floormap","version":"1.1.0-rc39","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc12","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f89bcd2aab0fca01f859ac2fb6b1e4e08391860b","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc39","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-9gW48JRDwTH0HiggYQMLo0vRPbPBQze5Rt1Cs1oBIdk4K4Eo8mfVijYJcgdyPJvFqq+15zUdRUJurECeIWaidA==","shasum":"e70aece7e37cfd40b51811e3df86d39b5c3b9964","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc39.tgz","fileCount":16,"unpackedSize":55179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxnM6CRA9TVsSAnZWagAAq54P/0q0H8URO7HfLeffHSdu\nQrfEfgI3vea8tqW94V/kSENw9lOHI9wbNI6fQ5rNex6uuV1jr4hzFD61oj67\nPmmdBmLWGhEGp02Y2no+trgQLpUFMcEbxgEeeKT3iBvNKrXjzKRQR1B2vfl0\n9o5Jax7XciUHnTdvPiF2owLZ9cEyR7TyXcuVXWaekgGYLzNjvLQ3CxnVzUJV\nsE9kqFzaFykf6k8wiOTacPID/E+E6uzE64xetB6SRkrBEnmiDDW5KmvOtCvS\nSw2/pd8ZHkm1nIUBp7cay2SyQZx9khl3QlTLNr0USaab0jT5ZoFekMyuHIz9\nn7N1Lk4e9V+EoI/t4MOJxWAp6pkrMkw5bm4YnhCd+HSVYUnYo0ENOvqM6GQa\nMaPFHaOV4L/5oKrOKpGc9E1w2Enqe74/ID05G6L7HEg522zDCw10AxhVLnZp\nzgyTAYAp0sbHgfPrT1w6dCPZRI8l6iqUwpMBYTC2JS6mTOA8CxT6jC7aUy5I\nAIgQY1s1twDdChhMcPdea0jMou5jwgfS0IYlnl0mYsXqxD/ugnbHT927y0vr\nYU/C0AxkvtQopC6DtRHoVjG/Ugo5mcMSxFMLoQr44jXcSIrl1qQl/8/49wZZ\nujwii0QmvKFFh+KGXzpZv8knoiGZ0G/gZH3SjkyPuObZGq1r6JhNAgcgouiD\nGwc/\r\n=zt6/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBy9xxw6uheuSWkNiSET4H3VGjVeukTVhMLks8mXOKLhAiBQ76dgc5vdb8a88R3wyiUT98hwRRW/FA+m9rv9/UDUVA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc39_1556509498091_0.5619845969842414"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc40":{"name":"@wework/react-floormap","version":"1.1.0-rc40","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.1.16-rc13","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"a0ecf705b94024b4f9b0fb52a51dae0756b97760","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0-rc40","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-/0c0zHqZVAzc/7UgFphvv8LyNvKweuGTL/q1HwP8UmwIwI6eYpPYX1UCSPjGom03EpPnFHufjp9+zolJIkPFug==","shasum":"bfc55d5b2e93cf7583c6cdd39def34f9ebc12132","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0-rc40.tgz","fileCount":16,"unpackedSize":55179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxrD8CRA9TVsSAnZWagAAxQsP/R70Su73N9PhBFINREww\n3vBvJDIiYmoAHmlWEvEtQl1HzwBSoGQOBtnOb1cvUmGnUfdf5iv/KJg766o/\nLBiTSvC2J9lSZyEGMK20nLDfZvfBz+d+e4STWpO3Y10p48kRIl2gHM8F+mzj\nDLg0lIVvUod4EG8mFN25VWPS3NJDdY4ZO67x2Oh/jd1NS5LHzR39B52jg6x2\n4Kd0j8ieCdqpyDbKg2brwMq1LWFKInGh23AuTVKp29QxeKBKXKWfSfqbzL4G\n5nu5qFRcu3+Ebk4d5Rb9l3Ot8kyaEFoZMpixLrmm3xL2Uhgu10zXDw9hdXVW\nw1NyaSp1+FCsUpmoJGGp1l6mP0JyNMWbAwSlYiyLg8P3eB4xjuXSkaaC/qwy\nbbfcKW4kEsfWSmj2fZbbIoHNlo75aH5+P2iuBx73Qu+kqKwQIJXy3ti8PG3W\nIxpr96tWqk9qscY6hsqh5NLN6bflHF6qHo+Luyhkm+gbaLd3gxgJ7HccQ0qs\n3PwVfnIqETOKk8zdYZkI/oVE+RmJ//PzUe0CDb28yxeZ8hqeMBz91w9qAoRb\nKaQ01hgSlwMDXIas49/DP3zZ8uE8EtE8N8rKdJgpK0k32PTTb1fbnnrcl6sx\nEPca3rLplmsTGQuK+XKshdGV2rTORzvOzf9grBfNAB/3Cozp09st4KRn8azv\nrmyd\r\n=d30a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzRVfzid1QLujXDqgUyzW9xRAdYaSCgm+OXaWgisk2NwIhAKbOAf2P04IwaZ3N5397w2V1NzA3T+VVv1CIdKq/eLQz"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0-rc40_1556525307734_0.5142132618276354"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0":{"name":"@wework/react-floormap","version":"1.1.0","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"c69327c691d01887c5dd15b7d93bf9e56eca8b2e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-cr/0gsgYDJRWODwYugKg6BvJ1WL3dfwUeteeQi0TKM6N79DT0xn6r3GDxdGq6yum/1M1v2g1ohwZfaMrh1E7Fg==","shasum":"c1bc94586d0bcab0e47669a82146314b4a9fb257","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.0.tgz","fileCount":16,"unpackedSize":55168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcx7WFCRA9TVsSAnZWagAA8RkP/AkNiKclNEyQLnSqlG+m\nSPRciQ+9UK+M5MADK8MzJ6yyN7Vx9MfZJ1/qRQlfZKz9CjtKINRhteEqa63u\nkRBaIIa1z3GtIkjTzfSV9FEHDrLCf8WR1L9EBpy9cmGShv0xNM71h3PfoKD4\nWWoA1uOn6m2E+6UiyFE8XN26BIkGYY6RjfgRvGSmmCeLQC6pCQLLXC8feWzG\n+DmS/5dId6Fcawq5A18EuDl6sA9y0fD2ECsq3DMvUnW5CWon4T1fe4DORQgF\nBNR15meLRsIka2uwfpeu6dlsMx4YyoftoPnDR5vymlTaIOhrnt5wOnUhgonp\nQgxQBr5I0TUqYRffoOq+aiuXa80IK+bN9jm/iNzegje6BpsSzyHtGecbhUMI\nL0wTJYYqpuN4yblNVsE3hslKGaiXd+zE5zx8dqHFzBBS4YJN5Ai9OonHHwKE\n7pSl2dQ+/ZGyCcFYbwciCIq7vCwsKT62kls7KUnxPlrA5XsaWLWubsgzTpAW\n0zkMG0xwg33qfxCFo7ZPDTkqnf7tQPYvM3rAq7vdEHFMF46k8NYNyfe6LCvK\nwUAqQr/TZ4LOD+rk4xANJX05ybjRju0c3tqSzXPmc0vUxvyaBQpmWjF9xFzh\nj4+hhAVyIN5/gVtWO8vcMirEuQEslJUxzXB0hZWGsyXGQlC7BM33YGKN5VqF\n1qNu\r\n=nUk6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPI3lAmI+dhz1UOsP6hJ3TRWtj3Ip7yZL/tUU1YC5F7AiEA9SeydkLDJmSAdir9f7Cp9HImNzlrV8iA5onY2FTSUN4="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.0_1556592004921_0.5658198317172058"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-dev-lerna.2":{"name":"@wework/react-floormap","version":"1.1.1-dev-lerna.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"^1.1.16-dev-lerna.2+ad44724","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","@storybook/addon-actions":"^4.1.11","@storybook/addon-knobs":"^4.1.11","@storybook/addon-links":"^4.1.11","@storybook/addon-options":"^4.1.11","@storybook/addon-viewport":"^4.1.11","@storybook/addons":"^4.1.11","@storybook/react":"^4.1.11","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","cz-conventional-changelog":"2.1.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","git-cz":"^3.0.1","husky":">=1","lint-staged":">=8","node-sass":"^4.11.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","sass-loader":"^7.1.0","storybook-readme":"^4.0.5"},"config":{"commitizen":{"path":"git-cz"}},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"ad447241208d2ff29a11ed1640c4118423175bbb","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-dev-lerna.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.3/node@v10.15.0+x64 (darwin)","dist":{"integrity":"sha512-/iscVksOr+QsyW5gePD33ic0LmQ1wnTB1qxyHn36/qfvUmuHgFEXs++8qkKp4XEADrA0bB/GZA/Gx5Te+ogqsg==","shasum":"00d073176e1717d3e7bc326506509f817f13ab2a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-dev-lerna.2.tgz","fileCount":16,"unpackedSize":55397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0QlNCRA9TVsSAnZWagAAPI0QAIbsKiB7XlMPtfo7gnG9\n4mR7+IHflt7h0SqoIyNASI8jiTr8alwhCatUmprOuKCoJcqofftqRCEg5SMn\ntGHaaXPef8Bu3iqyDNICOMRcYsEqmZzLL7iiegxR8XvDiJOWjAeXleOMD8Ip\nfSSqtlxkAknlQmcY3nj8zy/0Di3v3mtsMjhM8iq5/WXmXZLNqqs8bh8DgEJ1\nioYKUFCFDid9HpRCDhJ2hIysws4wDJIql+/FW3xhulaQsrAM+0gtNITCUHMV\nKboyKOjgq73wgJFv00DRqH3M8hABOgv/Bd1qrMhF4Oefdx9MqqYrzARPzCub\nn1iJhMJ+2d8vsKOgJw7eIQyCJ7XBNDakCAVXmx3Uk6nBZfPG9v/8ycuj9OWt\ndYWKEPSo8uyE+ijTAwco2Cc3kQQPIfPegh+Kt0ECrOCTwc1NuONtuNaVueZU\n0Vzq04xHxY+x1QznCd8Q/g367kUn4vXEl3R2CpndQxvYXktCVEhJRvSqgCnC\nK6/+fNlHCiZlMj3xITP8EOjzlXbWvba27bFQnVK52BgNEamxiVjvKwgEsfVs\nXz8Y0sOPx1ok9f0d66YphJyzbnQiS0KcUWCtFBDZDhA0aOc7ZSIe5p9phpEY\nT7x0LtE/xkQhDIjpYuZPXJOhOBjBnV4Ue+7GfWzqHsR9ApZW6uTbIilStsHS\nn74Z\r\n=QlA5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxIKmNnNTLTOsOjB/jxO8UdiI0z5H2Wq0xf+BT6DSeCAiBy4f0DfwzbxoJ6VdUE4ehqRJGrVD0u7m0bSRICO8dqtg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-dev-lerna.2_1557203276439_0.33226467272530624"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.20":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.20","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"^1.2.2-rc-lerna.20+9b152ec","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"9b152ec1953d70b93e594f7f3f8692cf219e1a4c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.20","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-N08ePyO5d730iBWuW1pl4MSKZ3V4ARTPJL4uEvZt2CGZAUnSUK4bzu+aUHuBbKh6BZGpYuTXeBgooXESWmY/Iw==","shasum":"980d59dc836714a7d5b31fcce78f745896e2e2df","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.20.tgz","fileCount":16,"unpackedSize":54964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2VDzCRA9TVsSAnZWagAArIIP/0iXe2ywTVn7yazgYwNn\nIXyXWQ+EbucgsZPinItvo0W55RQutwYTC3bfYH3b/v0FQDcsjHjWJcN0UvA7\nBrQkHaPOc/hD7b3x7Su1ReV2CFQ7F8qoyr0Uk3cdhxd4h4j63iAKzuoj/xUS\nf/yQyBTuwp4J3Epo0iJUzdekmvZxoTmlGeoBmH6K5rJD8onFh7IIizcam+Ge\nlvuaT2SuJsZ8vuhxdIKT8FslV0r7kcEB0sNz4hBJ80hKg5C9oNZshYxC+i7v\nDd8UJ3P/1Hwg96GtBN2Zs1M/0OofjRWpEbjxhu1Fbc8nu0JInngUabqpBYX8\nUk5j/P7ju0gRthsDbcDtXwhKc1R2YL0uob05ErTw0Efe1zMTpM1S4x64QyuI\noIiz9v5LlxpghsX9i9siOwLrduQRoradY/7sewFt6OJNIJdIH8n1lZOFmjxL\n+VnQCqEsGaUI+6HV13WglrEQCokhw/UU8GApGqDPKUqgepBluEbjOpAQJFJf\n3WMApm1ck6+zLgO97zvHpvKc2d0V+nFF20xUmNOdr5gkKkcBq4tqKJUeUDBd\nIZ6fXE58FtbW+pSQiWhle6KbLZ1AnXJh4AWJr1Rd6iEa8NeaZf2zLS6vgVMh\nIr1Ul3lEioUGsSUOEvt7IKewEHwgTfmvAxVylg9V0PlWJXX0D/38WnEzMerP\nMtst\r\n=dsVv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHU5h/ZkOzLHyaDERhbDp7Cvqzn7h9aGlw7tfIPi+ZxDAiAoZVBwkGAApHarJ3EO4VlZIVQyHEZ5yo066vmD717P5g=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.20_1557745906478_0.4780110651671461"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.21":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.21","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.21+f2cdbc5","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f2cdbc5e8277d60b04ebb7a1e31221b5524ebccd","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.21","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-OY0IOmxtjXhHGUn2rrkKMs8bMX0yARKQ8lQcgAZSePu1/5OnvCb+4AYV8rUkQJ4z8eR9pvKWT8Mdv+z1aA6+4A==","shasum":"b3d6746e12c75e91571332aa536f772127df5b02","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.21.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2VS/CRA9TVsSAnZWagAAuagQAKOT3Gy0G2WaQU42FInk\nfS37hV5WYGARAYfflBKh9mvAWWC9ElPsbeZaCjOa0fDZCTG2X1M9sXE2VHjU\nIcmYYI4x0mabZOR3xqMTDPamuVQvHx5SNBNc4N9lFEebXNzyJqBDqW9neci6\nMzjwVzRM5N5xrOcm5/HE7SMqKQAeYf8zOOxVupLZm10VBxR9qXj4PrUxqUcU\nnro9Iezlx3DgXWE2jDMsMAX253V6/84RV8kf3Evb6kcRzTjb6PeIGOwoEDrg\nVlrmk8x3pyGZRnhKXulAdlULZXvzP/NI9e5mB9VmCpsUMQ+VDwE1X7+Ivd/Y\nhGgGzEgjsm1R6HpXyUqkCslYZJj5YSUYaASmJIm9uAETojCtGnktJCORtIVH\n1kOvKLnDXq8/2ZO7gWsmCJnGxJGUEDTCcvRxZmO8ndhp+GV74C7tigc4jGp2\njNJJKEB2w4z7KVHsBeJHtybAQsYxxifS2ggGB+cRmNzAui9XndKIOXvhqeOr\n+GTNoE9enR40eefHpGjAUVm4S1DBuS0sTQlo1HTzIUwLT7s1OZanK/V0ihHi\niKaU9QRWoHsAZgju0U3ATz+FJgkpg6VIx7SNUs9zcLWBoGMHqfoF8iCOuM5E\nDB9cD3KFNX01kCE/bbP/MtcN/7NdMOii3y7qKTkmqZPekxvkhqjXauzDqv61\nF/jV\r\n=RBEY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfp4VBVbmcIeUgY4sMZwI/4FLwOiJpc3axbEmt+PF+CAIhANu0hsBOyq2vCeFnvwJp6B7846ClOwpFM9NGCCCeNgju"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.21_1557746878581_0.2686015461893736"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.22":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.22","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.22+af56bc0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"af56bc0b98da0119c36fc98bfbd7da39a3a56bcd","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.22","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ITr+zL/WdL9Tc7Yn+ypXQTJiX68Y206zG+Rt+0JA5zqOvTyntfZwo3oFrbFxOQXSy+M+NWHT8X1BzXCZefo9iQ==","shasum":"8297ff0da7d74fb768aac052f94fd7e9e36188e9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.22.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3RJoCRA9TVsSAnZWagAAcUwP/jbqDeLepI6Nm5xC/Pt7\n5+vN3aU1SV5Efphq/cmtA2JmXbCsUVJnZMUZT+OwRtQrhadQqsYMMnKhAQ5w\nQDDR29j5B9n+2qdKu7ALmuIuop4+ndzNpi5oMCTVvUqL0hNw0ntJnquR6wYq\njloU0hDnfGgSaPiI1V9yMQK1cWTWDIn6A9zkxIyxosiHcFkQ3fBEZblkViRX\noDavgiMIgiDMqjUfzKh59B669hi1PzOYrPmSB8GBviDhfGIvhsTsNwI1hnfj\nwjdIUiAlmDe3pEOBERI+eBdmvpCIuqrT6POHtBmWXKKp6v8xS3Br5yucqo+I\nznMaVijjZshvedtX4v7pj5nRlA5PGcah1oTRlxs5/j/xVV3lpkyCvTdFA/6x\nALIPiOEhz3r/m6e7MXWAtZc0fkIVrNayCu2EyAed8XEa2PHW1w2Odff8QKsK\nrjTSl/JmS4u5btyZcBsny1VWcpApk3+ucc1SEPKx1xT09hGZ8fmRL/lSXVWI\nRmbpkRtfGesi8OlPhkfkqhup46K/gEqsJBqDKpUiTSvExRA24Q8MnbkOxUoN\n5iBkSZVjFY/Z3kehfDNzve9kyc04rWsMz23fT20pHFpBX2/SDIy3zSpIYMzj\nKfAjCc1g7/+2kl4UhT/0bLfYgiA6SU2jZIqCB36ISnBBTDQZtHp5Tx7YPxSQ\nynI8\r\n=L7D5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtOgRTaXBO54oHyH2WbVnNAy+RWu5RtW7/lWx+cTo5nAiEAz3kBPcFhJJGxV7DWS4smVSFixtOhaQugW5lRxw5Xgig="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.22_1557992039679_0.11010453295321332"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.23":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.23","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.23+f13af80","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f13af804e615ffc028d7604eb5de7136cc67a8bd","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.23","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-SE1w1katE8j/6P2MaLsbXVCcEx7muxf+QuVnpsR2wCV7Coxoi9Amnfl7EILK9+BSRGXaCdtUjmGxySHghtbr7w==","shasum":"c55610bf6f9b3eeb1ee3c7440a15557833504ceb","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.23.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3nGICRA9TVsSAnZWagAA7pkQAImVcRT/eruJUzJoo38m\nTWs+VPbjKuSF7iXyEsgG/3+y0alW5qDDWgtyRj2ikZSjEtvRQV9ebZ9gXur9\nScHGMYA5FMGxp9PRInYzLOMEAo3FKJSF6bqFQNed6whAXokELFsWeN52NCTQ\nzpQP03CXe03FZB6xlnTKOwKKpzlKcwIZP9eJ15qYJdX4bvJ2boATSiKRAfD5\nyVbgH42/89wInQPzI8+rlIvwnz+StJ8Gj+B2ft98J2vhGvjQOictL/XLUNsp\nf2g6+xuIiYs80F8LoaanSjarTLPkqcXYz5wWPOMRehPal2eJYrVzBqc/7W9i\n9wneM038hdl0fyWOa+eC6vJbPHOXAjuwHliyP0NmxgN89WlDiWltpgJGzy7N\nDsMWGNz5sIIVm6E3CGXpbLFaPB8DKd3A+T5SvKdNeuMKu+LdxLVPGbLeT7RM\nyOumSRFqDxJPgBASvuXMVJwEC3G9Y+KxrFrsuDg8tOZUhSKw74X/NDmyhFOj\nZVfC4suiGCz/YGkHSRcRxdbBMjhpi58gxx384pT7GSb55n65/UO5PiROEtjZ\nZULjsmZon1ufd3bG3yxNd5hWA7AgUhS2wIJT+fmUwyRm6WjfrmCBV0b8GH32\nAX2BWrgcCkwCPT0Yz9Dl7nm+E/6T893IIhrD0Hqz17Vit6HrWtDyokYoWTW/\n1asb\r\n=Fxvy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClt747+aF3ZEpMQNO+PU5ckfaXnAGd39LvFZ+piqz23wIhAOjp8BcrrjuW77LhMIfNDIPJJjr0IxU84qFuyv8RImpI"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.23_1558081928165_0.9059769239620232"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.25":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.25","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.25+70c1268","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"70c126894375a2c439c86419f344fd48ea38681d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.25","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-tQ9dAgILqzVsVwsA9qAh2DLehLBsLPoEpoz1qdSRESz7BDyia8HgEp6qFhy/TC8A3M3Pyw4zFrqfKldxI407cg==","shasum":"7d3017919b74d14552c91c882552e4bbe7f9618a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.25.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5LGmCRA9TVsSAnZWagAAemMP/jqqmsjAGWajU5Bav07g\nHjwKnSv6Ht5WzD5tukAd58y8RMax1xFUP7ZhoM7cdiH6qEcf+wGqDpix77W9\nNIAtLdeBQCYITgXy9WfwKeNz6+msvcWGDKLN0W7NGbi0AE8quYpT5Rhgu2N5\n5eosyftY48Dmo2KTHEigaY3y0du1ZFpIRbY3uEWF6XvWIXYU9yb82PyqipWc\n6gmRsuOKO05eBKa0u2cdPO2F7kLRoBkk1wSWUAYA2czAVKtsJqhN/MFWXOFZ\nxv78t1eBPwOM4L+L0KSLxeo4HXRgsuLPLPsqpEpAyvDyj2Y6wdCz/3Q0a1L6\nhfICcl6BmCNibDpCXgZMx64BqfeuWKTRKHgZ52fRsNvQ2N67u+NjiuAqIxNA\n/5wR0euFVbARq0RkCI0H175P+3O6ZBzop7VwZsjsV/d+hImMLChe3/sEBVnq\n/oIhMioDRNMooV90CM8kuFYOIPCnD4S6gpmxoXDwEC2+x0RFDd7zs2y1SjTx\nm6QwAIP0hGdE71ZdTTKqjeCy/ssrwmlt4dPK23CClxYFnzLR0MBbXJOjEG4T\nlCu/le2vBirIO8A+wpBgFa1bC9FaXI1R7yOc1OkSbQYCkvSVqAEVBy9wVAtH\nT788GoSSnR6qphc4QwNbOOduqvGPZWImHFVLPzfoUPDuMzquqSMZtZ8G6je7\n4tf2\r\n=DVfX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDA9ZJZWOnfBdhEMQ5BUQQ1fSk6i0lQPkITfC/jqrzgCwIgY+l718UWGyhGo0osURpGbO9yo8c68/Cq1+XlQn+9UCU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.25_1558491558178_0.36354379187366725"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.26":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.26","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.26+adb30cb","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"adb30cb1df823a74e7572251831a6f2e42b4fb2d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.26","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-XilWoJCx0eQR/CKoEoDHx8jtfwKY23u5seucjUgME02Pmvjcmvd48s9i3s06OZHNLzPQx41us1He0FlEBoz2lQ==","shasum":"868d55ec6c6f49c3d38c095706970cccd84cdb52","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.26.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5MF+CRA9TVsSAnZWagAA9CgP/2Hzks1T4TnCpxwjFDHK\nfcl3gi6USKGii8Tllf+dCPnqc/yEtFdWlcinqC+qJtM5qu55S6fZv4QfHuxi\nZnKGkMNaNKCSxjBJo4vmVyJJQYAO0nsZoMhYWDTFydIyqKJth5bP6K6U5yY5\ngryu6txaQfGO9DWdq1CBgBo9KR8VVByiTRE5N7LfldnDkQzI9CO+2y1rrhzT\nJjOEj2Bb9xALKem08gIPatA3j1t1qUR/58qfarHF2MbebJKE6OZ3qKG6SRRO\nwG+ytbJAo963AqVhkV4tHg2HdtekGDDtq3XtYQW2jRWptolpVGwgqe6V3Nzk\nqqwfFLXI+UjMF+w8hYKQCf0hvBmpWsL5gaY+v6uNkh+ct4JnIJpNb+Dwjg5a\nYZ+v6xSMY9Az5NOvjUvie8HeC96ilVeLL+TO/MdH94ghPWQFa0yD6deS26Cb\nfpYhepJbuo5w8CGyrFc1mg6PDbrCObTIXImeOH1QBLT+ZnfNmRResE66Otcc\nXvknz/TWiDLh7vg0Gj58bsikHwX4HOI95bdsOXqZB+kL7aJz6C063MukPYf0\naVfME4ISzMv/rEVE1ehU7dxEPKJi7m8TlVYPy3dvo5HtYNu4tK2K1kxFwrpP\nJAF8dujesKcSrPSBdtAiAqopvtvTLoryxjxwXAokaQtztgtOm8FCC5C/GJmE\nmCdL\r\n=Zlmg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB7fSybEF8XI98KSWCZEgqLGoDMPR2E5rOSKnmQa+MuVAiEAgNgP7QLEcKWv0d7Ywd5rHb4ABMnjok+BaAoncxdFfTg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.26_1558495613289_0.545370239395139"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.28":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.28","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.28+ae370f8","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"ae370f8ddcd7dfe107caec719d8531782a27ed7c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.28","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Vy8QtGlghdYrIAql9pWvNP5m35vf8C5qUgiOH8/KgAnVHVX/346TeMffJEZxEGzrzjDyrLWm+fadtEAvCqs6fA==","shasum":"8da81da7abe801e3be06c25bb86649614d89a112","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.28.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5Nv6CRA9TVsSAnZWagAAYdgQAJ47ANPh2DTv/CMKHcm3\nDUVRbhtBQk8J2A/atwWz6EdRZQ89oy/8hm61Wvy1WQ9xgIlD1tzZp6Zpszqr\nK1LveknMcAzxDt5FI+I+jd2zgeMnCqm1ELw620AYP3gRJkI/fqJQ7f/rADw4\nSH8XzqIInTiQUKO7os6XgA+v8VKcPiu7YRPiL+WWU0eGZB8eKjOWExM29jbh\nXZ1KS4stJA1lYsxGLuppIu5Gi0cZYKfwt0Y20eR0RPqDqicPQ8EyxvPZHUCf\nFHh94F3kABo0gc1nhVmBrXHmF54gEVuxpesWIIrFPL+cVAruZOum1ItFxhqX\n0Zwc6JNr4ONrVxO0vGqEsE6rTvI1df1ClGvsKh2kt31UVIc6t94YekMtPPdr\nPD7UL71aejN3eXO6Dkzdc9NHdkQhTgJUTNl3u0RZAoYdeQnD356go2fAkMXS\nmwRVvws8ZwbBLZvpWaekXP1OJNjLnkybDDfbchnnkaRsph26/vqud2PCuyPN\naEwNVKVYHnqxyhrbvfB6lQZV2v94bXs1JScd4oxlRxJhvXgiL6O+WxWV2YrD\nR7e2zCRuLuccwV4WDsuw/2cNrNcMcAnRtjtVA/BqSQL3ai/euXgpvWM96fe6\nnWwNykvj8pkC5RbQlNp+9Xd+LZGrGvcJ0FAFdtRVWN+8XH4Mr4PaX6T7XJMW\nShDG\r\n=0CUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIEl+obhCqWFBX3cpLY98Co57S/H+21e9nY6bXmTWfgMiAh8OVkQsRMYjp3gLctmo0UfqdN5c35VFY4q7tbZJFbHQ"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.28_1558502393658_0.444483540238102"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc-lerna.29":{"name":"@wework/react-floormap","version":"1.1.1-rc-lerna.29","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc-lerna.29+8cb0435","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"8cb04356c32bbce7dceea65cf59b46a08e6655a2","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc-lerna.29","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-hjIM4qgo4p/RNfctzjKlJa18T7wtvAX6opBpjEYItUZo6LMuzQ1T6/InrWBGTO/Pr1kES0IGjNT0yvbTevwc5w==","shasum":"af07c49de0d97acf2aa84b4a17586bd859b2480f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc-lerna.29.tgz","fileCount":16,"unpackedSize":54963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5N7rCRA9TVsSAnZWagAAxVEP/0dvlD71u5Z+mJEK53CW\nglBEhn4K7mWoMJTFSrQ+RfIrDKSqdMDfG7unAqqG3vXeqg4k2Onbg7+knQOg\nnbHwG32MAVbu1V+ha0udMsnaZdrfyJzb8wSKMZlBKsTn3GEJDW7MS/24QSdr\ntXbmaFObtJtanVXFzgxi5Lg/qvnYQZv5aGSm8TXpEXY/s5P1avg3JkLEqPJN\nVIPNXy41Ez4Rg9Agyj7+D0w+1Mwul1Tq78jcEQMJMUIM9OT1+JXANmAXFO7B\na2NLSQ+UgkuxJbR4cL9Qv/0cX6WGdRqz0crK5xGci6m/RaiShW54O9RCBVBA\ng3ozoF7e2LdecFrg9KikeGyxeX7pgIJ4ZBvgKgiE0yZEi4+Tlz+xFH6WJPGn\n+n0da3DUw4fQTqa/7exIo2MKbV007foe5CAyBZW3GwK68QsC9tYVLbAVLcMS\n588O2Ap9/xBllelmXRu4RXx3gQUoFmPVvBoffuCmsJTQ3z55y0Whsts8tWh4\nBdAVa/BVBwp6xEAL8bXKumVeYpqyG2b4yD3R3lpakPbh+/c0EVgE0AljtdTs\nrIaJaHmtPAEnumBjGV2uPBD8bOjOHVQnViJttibUHHSPa8flJLzln19g4NUL\njZbOjIzppPfvpbyK35uGMnkf0mbr1pg1MX3LZbc2uiZ2VclgmuCMw3jYGr5Y\nqQ4d\r\n=LJ3z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXv0dTgZtGylFrKhS0DKtyHGkKeoR1iQ2InjomGw5VSAIhAOw2qBniRA+vV5KIkWxmxP8I8YKuPtfUPrbYqjDEf7Tm"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc-lerna.29_1558503147352_0.464003942899041"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc.30":{"name":"@wework/react-floormap","version":"1.1.1-rc.30","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc.30+2955903","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"29559039515da5d557e157cb5df6df82e758f332","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc.30","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-JRmParu3/jOqw1IErsL3D+LxFqCkEFYBCLvi6MMLb2XMWgT/Sp7WOj+omH5Q53/7MVPRR295p0tCUkX/rNnbDg==","shasum":"5b85ed56dc124c7fe182e43ea6f08bb7bbdd68ea","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc.30.tgz","fileCount":16,"unpackedSize":54951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5PS+CRA9TVsSAnZWagAAmHMP/AyXjf5U7ekdW3A2aBpZ\nQeZa0hxLgeQuTXMpWWIpWSVtC+aswxkDKl3zmxK+poSHrwVyEvlAsbL2UkxJ\nPx9tKjI9S5eTsQTzORIkLuBqlwH3rbpCw7yLlU472ge5Y0PvE5Jq1w3Kxhe9\nSZwZNR5gerTq2ta3gOEjFaz6p3SPgG+9utZcOTfk+uy+TyV+nGMZXXKmXc20\nYM5PwQnq++mFVBx+b7bbkipwBHWrekLxQX6EqAnyYxr9PNe87d4uKma9AfTg\na9hRGiPd5+hkpjiweAmVVd0SK2ePbe2EPb2JeFMTcuUNv+/22H2jv/uqXgt8\nZddSheYaHpqnJSiId95h6GDz/ova/lzfismtTdoT+DrATup4erpz//7tZtxR\n0R00OYsklooM4qdJK4zBXWRtUbi0xRnjpY46qO5Zr0u/X5eky+CimvkVRjCd\n7Oa+fHLw8+O7yOcGKV/Y0nC710uyIjbDf4HadzGkQOxbFj9feEauxmaOsfF5\njnaYKAd4ggo8WC+S/wKfaypZFywTatzC632VkB5Xy3eScyn/miEz0z+/ZR8e\novqC2bocMMHp0DuXD8F3T822daD2hdmBfMQQIccQEQv1+i84X1xMBhiKJvHl\nhanGifdmWNSHpOM0Ek6bYRsgi3yBLYjNorXsS2uqv1QBS7PtI/SLFKwYnI50\nVl9Y\r\n=BW8H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHREdWog9Im4tGku0QdpNaKHlETKPleP0T3Vw8y6R4VwAiAiQUd+X54kaXEcNphmPPig8vZYwpOiraOmIozLHPMIuQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc.30_1558508734202_0.14492630455105182"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-next.34":{"name":"@wework/react-floormap","version":"1.1.1-next.34","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-next.34+3c99aeb","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"3c99aeb114ff261cc1b53168af8acf3019ec34cb","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-next.34","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-xvE5gd8OrFmIcrToymt7xvd/zYSABVd4hgznWRG20D2v1a5iQu7cyfTopqwgXZwzoPYW3dwpog+fbQwz+GOMLA==","shasum":"c0b0be85416e2c163b1ae810e2bf0569cd9c1949","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-next.34.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc54OtCRA9TVsSAnZWagAA/BcQAIxho/tWASgX29d1+SRG\n3XFQ8qPPIxPst3BHyHGU41spy+ENYPsBcwlbwsREWlOlSrnmF64UnMWObGlK\nupsgpZvbrW2EunElvdKOAyNY04l596dRDGzBy6gRw+/2PqtlZpAT7fzAU9ix\nSU3aZTrek4rzgH/V5ymTeLOTBhzHqX76uRscN78WCcmnkag5T+hGjUTHtwry\nvzzi4OqsUoKFcstVfHyogh0BXuOifa4E1j4HtuvmgWNge/SegCpaa8rONWvk\nLB5uJapKfZ9t/MjWyI2d7LfFWJzIOFgYg7KXx+M6YobHqAU6dJgcyWARMMqh\n2jreq7+/NwB88w1c9K6/E2w9mi8mrmd0W4PGaJUJ6TRQbMPH4BlqFId5+CWK\ndQ7m3mkOI4I2ngZFYQ9y+oPPKoeYdaZwI0gqpI+oPlIEeKfMohuuyrINJaoa\n6yQgD1pHkjL5ZShBQQPaPQ6Kt+4SYOSFZD0e9gUsr6k+Y1NBDseWD+021CjZ\nb4Lmm3Lidk5Ibo9ug8zI+is+cOOeayiCYWqT3zMGl9LGRmm/3bw4g+I2edKq\nRiPJi278rDPXt/sObFSemgkjUkmxEAdfanLuT3WflcoMRL4dIhdmjpYD3u2S\nq86o9UlQi/fsNaC0l3vCCGvqGWVG+MfOXPulNPYWBl2JwZHvBBh19TngUqlr\ncSdr\r\n=td3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA0zojLyVF50igYilujlHPD+dbv29F0xaZIWreSQeuhgIgG1z/QtmBcWmPKWFKyewqnH33sQyi/lWQsU0qnhY7vD4="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-next.34_1558676396731_0.912293792576337"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-next.35":{"name":"@wework/react-floormap","version":"1.1.1-next.35","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-next.35+e364e3b","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"e364e3b14744a220011f258bf207e9e3aaa637ae","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-next.35","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-2wIk5fa/5CfpLPljxGoJjWBNR/FoH616MbwJPJlwAZA/G2Nq67HEA7z+XomqIJok+G6luHaYl4+CGdkmVjEUzQ==","shasum":"5930abf1294169fcef52f1b9ca923b84ba04e07c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-next.35.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc75x6CRA9TVsSAnZWagAAs84P/RLE66Ldkf61O4MYzpsz\nVjDvM0MkuVgXU6jommdOtM5GdHyBs6d8DRC4RNwAXx6MzUwmkd7I6ZbtoCOR\nnIRU6uFCFlQwgAqhXLOMOUF2Xf7K4o7d3jSydN9Cb5AlannR1u1dXzEukCXQ\nYXjpjX8GQ6e5dO87IiLl33U2cz0CaGCwfMXk9iW0MepUlcAk9I2tPzqWzBlI\nu/RnPuDeRR0nRkhtc4UB6E4xc9F4r+QIYUhc6h43zLQmOSyb0vMUtRCeDooM\nh3aOghuN2+niU7ujVWOuWzaSQzqlKe/a/93q7ptRIP1S9RBqw9Wix2RM0i59\n7VS5Syb3/eTdEetCv465axAE3ktAbBv0SbE/Ek/rCP2FSNhyOaB+naVItX9a\nRyXJ85jeAMoo5uDvjh7Fg4nYict+qh9sAXfi5BVMPdzwIfkchXiJ+dVPkrFV\nrUuCK//XS3N14wADbTjYYnVrXEvakFGN1YVRLx3OXHt1G+nTGkAc8quicq3l\nnpjtiORZMre3rLX+cPPoHG4vqr9vSPIgoU0ExNg09qf6V+/YI3F5fjNxpJLF\nhXMDmwGO2srk2zdTjG46z+70/WIqrK6GKx6zmE8Om+QD3/2EgNMtL/+Gs40N\n+bmj63ZadxuceGHvcrJSmY050eJfVGq4GfocJT/WtoBQytkmFXYp2Z9L7REK\nuI8i\r\n=TjN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICaGpvFE4nXUHv4UCtwEkN/hD4UC7uFLftdsYjX/F9IeAiBNLErRsaaCdsSA8IlojSpJAr1ov9xsv0Kbbvu4FkLdMA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-next.35_1559207033529_0.08949395930020732"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-next.36":{"name":"@wework/react-floormap","version":"1.1.1-next.36","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-next.36+bfe28a8","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"bfe28a8610ae3ad5508223fd2ffa2f0b22f8bcd6","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-next.36","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-PXA9TtUuxQEsii8ro9/fZynoaC45l2gMX27DeTxWukIkF9lkmujXEStYoCIRHbW3aX+vbL1uYjDC31MfbWdz/g==","shasum":"65c6a4e42ad67181372097344a6cba78a96677c9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-next.36.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc76EfCRA9TVsSAnZWagAA41sQAICTAZ1ZSUpm6G9oyjRH\nENmRVpKqC7LpC0umJz8pnVLwubh0adwOJvl+2RKyMCO7D+scLmul8IQfEieW\ntFj2pF9VUARFzm1BWhkIkTj67BuIQbGdBUf8RsabfJh/4xXRxoidJjW5ch/W\nprbOr9+xduhgV6Jo1mx3bkTIEVos8aV7RFb5lwk0Ngm8aYocpSf9ZXGsXpeN\nsBVrumpT54cEK+GumCEro9qqbFIscrD0OEFv+y5Wcj3ZhWlGtraeiNaLvssw\nGWEWOIq+sZu5wIrGO0dJXZMEqDFkW4LOdcKgQJOrwxrVMUVsBYjxeTmrjgqA\nErYiKPZBl/bqEhDzdNkaoL93Ip8h6vXIRmpj27sy2DgQuQIvyEtLR9IS99Fu\n+PdGj7u9P5GnbSWsd8RNAH03c/YsdTIWKYCJHymk/O38U8zdsXCZRXrhDU8y\nwIyAvdNMf3DO1Ex3oLr7MGjbThQW66eKXCiKHvroLkUElWRlwGAPrDDEPL0J\nEghd5vHk6+fSObBI7XRsmJ4kMvLhCQ33dkOzNUk3d2RnS9O10uga7q4Ymvjs\ndhdsYMpe5uR7nA3w/xUInzc3tKYKjkbuP6fgoepK8rtBZv9z+5fMN6lk+vHi\nGNU4J4xf8yUr88p5K8ccy6GwVBlQjMADaxrplm9nS6MmmQLZJZMNcZaI8uku\noF3J\r\n=Z5fd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF8KHkau7ue1y3seX1KgqpssL/eSqxXZC762ocotqfIQIgXDb00gOIf8XL5S7J+I6W2n0jMrakYyp2Cx1W5QepkjY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-next.36_1559208222406_0.9215985062277288"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-next.37":{"name":"@wework/react-floormap","version":"1.1.1-next.37","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-next.37+9c58a03","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"9c58a034bb229c139cee5934ee6552fc2221f834","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-next.37","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-QuGldQFF6o6+zUAaqsSD0QjTW8GIj+N7ZlWkfvENTbGGHuuihRmpAvpMV/DOi0zh0kQ0wCPjcX3COFNO35pQIA==","shasum":"3b4214be54566f82bcd4e01ce14f4947c3d3fb68","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-next.37.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8QcTCRA9TVsSAnZWagAAXVkP/33hg68YFwBtEK3NjMVd\n7v6OBXKpa9+RDa0TeovGrcr3E2fJpqQKJhY+ZR+SswLOLHQZBHHV5GYySfOd\nyZovXKlmqO+FMnrxrvRwZrySaNGeY6L5t81rnnmUk5lJb2HiBSBsO8GK5+h8\na2ThdFkYE38LBa2TlF0b1nH2MwSOMcXlDhY/I6NISRnzV2u1l9HqOuieMhhe\nF3FkCwfO4SHcpyIw6Bb3zah39kHyvpFenJ3eTKi150CYGOTqQv6ldp7D6o5x\n297fJP1tporuvQpojI1rGMWVaQNAcRENQ5rausYeE8Oz6Wacw9yUQxx3C0oF\nJbJbTDUA095jqWv/9b7qfkrlrUXmEk+Sdftx11dxB5d0wQTBWsJE53AB4So6\nNZS2D3dlmbbBAJwl8aDe0GQvu6WYTZDMszeoSzHpkG6cbZGkYghZ4CERF44R\nG8D0/gBLoot0WvhHG0V/YZhvzj00VzURNHs3NpYL8UDjMwtL1BU5kmFA9kTQ\n8tYWwal6yfYuDLXwVRzv9UUugsUxaKCeIamWnmxUl6AetyTDxbpPUOEUNACF\nl0ExUX2g4GP6XxXYyJYFQQzHdZzAMC6hgsFYXC0KOk8zi1aFmXVH8Q4N+xup\nFRlZE1gCPOL0USEd2hBA9H0hxN2xHTkwmTnRfyUTDVPUgrOz7XO+2XN7Ipwp\nq4Ia\r\n=ioeT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAEsmbWU/EhpdZY5Jiuwk9e472l6BjXFzw0kHI6/p6wAiEAzLrZU3ohITOZfiXENuEZnJQ+bou2TWh//d/wMfUf2rw="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-next.37_1559299858672_0.3659963198016798"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-next.38":{"name":"@wework/react-floormap","version":"1.1.1-next.38","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-next.38+ae90a17","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"ae90a17fee353fb21d0e9b7dbf2aacbdc4c7859d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-next.38","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-94NAASTkPIpbFGU3201+uKcjuUAmSCUaFfjdZ+ffPjW42iX0gfMwHSwodfgvRlKCSOhFkmNhVxKufzQUpsEJmw==","shasum":"042c94d5b7900004751981cd9845a9d96a858833","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-next.38.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9kzuCRA9TVsSAnZWagAAVhUP/3BKKweZ5TfarnaRVck2\noIWJROylRn5pTmpobJERqGgGVrmPpISlmEk8bOxt4ZmwawwnzLwaWk1YXSiL\nD/PLOYWsDuuuR1tY9Nda5mphweXCfOuKvLe4hYfKntN3cCho5LcuNngkDIow\nzGdjcQUe1HAooC7UbrBv8SHwsptT5h0lvoaKjCd9y4Jo6ddhxueUF6bmMJ0N\nY2m3Ho3/AmmXuwZyI3eFWEtoJeX9GXoDrBpBHNab59leXzDOP82uhIVY120j\nM8IUvdkTZnSBLl0mPZ3BL6gHsIWtmHSjriJ8vknAueWRdJB6tFkCQGpPYvYN\nb9gDSEN8s1sk6pxcAhaGuoE657NbXLUlZ6Vj4scQ4v3zd7QllIz/Qiz3L/Wl\nTcvcKKHB4OTAcfnuJUEIeuOPS49verJEEeQ8fhul1MZenhZf7vrasiy7XPwj\nLz5JuxKyNikORF0kgAWPWjqypv4llUaZ6iGf8hrqSkIY5SS1hQEhvJw2thVP\nWNIpesDpVW5PYNeXeU1IgvLzQC4zWqatuIXH6MMsHLl/hqdyAB9EZ45br0CM\njKoDiK0srNITqjMee5XdtewhfE/6RofpT95t7j5R9ijVsbMuFcpBnxBV0YJX\nb+nMLR2osobrzb7ek6U5iwhepNvIeub9t8s+Kd0qQAHNM7HMgJgsYg68WW4k\nr1P5\r\n=Ys4H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEarDcHYf/1H6Jx1msejmC8aIs1pdW3fxFDSjUKNEFKgIhAOzMoAQfnQFwpyodpIzKLQSezRAw+N3C6gRo6oTv34o+"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-next.38_1559645421642_0.8779877385092183"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-next.39":{"name":"@wework/react-floormap","version":"1.1.1-next.39","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-next.39+b64c0d6","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"b64c0d65e1e7b50c3677b2ace76e852c4391007f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-next.39","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-HaVTFrip/mZYOG+oO8WRblOI8VXDa7b/MgMuNOVSgAkEsKfhBqTZfyeklmjVncafSCe7F3aZ4B6RadGTkVPkGQ==","shasum":"d6f797dc9eb9d0bc53d74f18700683603f717d50","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-next.39.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc958rCRA9TVsSAnZWagAApewP/3KCzO26twCztoYvGmBo\n8puKZkycKbTcxRkP+wneUjIGsUITGFN15CLhlLntp2TWzxkELMw62u9A0xXC\nRbZyGZ1t5MAFssJfFFgB2NtUcXUjkeIW0BCKR/FPbIV9pAvBnYZAVlBbnAbf\n8nvnokRYbF6QuxB9+BeAmNH2cmL59BV0rtf+1HaLXOjhYiVnTguU0UARSUUz\nyYnhZbDyrhyNvSubp4PiAKZCnHpiEPK59FOQa9tNQ4ygMzz16+oExKAoLz/3\nfZfO6Un331GotPKxgfc+NughcyfgIrIxGpr6whgl64ojy4w1S+fTqyKFSQOH\nUp6iGMRkJ1o+Lb6I7uuSDZOWku96szL1R46L/A0Psho99aCDW6FL+kz928eG\nQWssKz3lrnpirmX9nKGnQxtvp5JlJRkl4JaGpjYQEJ/sXvgpv7XravIyGKkJ\n9ca5JujDCKzFe31XbJM68wzCwi5LxjKL1kU1ROSfvqbfd7vaUjwyvmu0CGYr\ncqGMNsWqBolmd+fZzKN35bOrsDHp1PLhFTEnt6pt1a3qmCxvYXUuAo4ARc74\nwWfhNdsCOeUgd2CN9mg0lA7AiRBk0dYs6eLmzRQEwjpHRodF6o8odOZP3YCs\nU1i7lAW0XlWKI3aI95U+EobljORARl0QzWFq/MIm8BvFtWAV8YlOxP33bP3t\n2Uqq\r\n=tv2k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkpR9jDVePxwZAqE43MMVxD3ve8aCfQAOQGEyKHzb9bwIhAOqkezDJ2EVCk03XKHviJDYOaaFwmtqBvZ0dzNJ3hji3"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-next.39_1559732010674_0.7343983727486545"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc.1":{"name":"@wework/react-floormap","version":"1.1.1-rc.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2-rc.1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f8b88acb5ca3f6c3ef0faf4ff030d0d8bd4017a5","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1-rc.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-17lPz4rN3Up2To2aEr5Vv8Jlwyx74WmVPsAYNH+npqKg2kP9WDtG0pIprPkR3Vj+ux1kMKCJUCQ0HMvnJuWNUw==","shasum":"3522db3897b8e1dc74451a3b177e586668352195","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1-rc.1.tgz","fileCount":16,"unpackedSize":55178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+hbSCRA9TVsSAnZWagAAD2oP/0l6KwQkvL5zFFCwEbVC\nxCpTGgPNbrRiqH+oROevZ6W0KtXFYvTFuVpydHvnTC1TFKbvzXIOFb6e6yXQ\nY/GNSS1TFC19Wbx8Pxa+ch+Jyo73MHaF/05huLTaBvW4mHKPX0jZIhCA5Xxr\nWtQNxCVoBTH14k2/uotTX03Yc4ydnYMmMwGfxH9u9p7rFXvVCVjGRF2f/WL2\n8Rhl0/Iu7LG4nk4VuO5MDe1rkO6Z95H/o1azeiMFP9hPCcvLhlxXFoLxzZ4u\n0pbMiQfKZorZ7kJpwh0VG73YkLO2zzIjyG+pbwv2h9qUJOmn47emaR459+sd\nfQ/trWuzChz+UL+lqTF+OCrCxQRgGfMPqcUEt/yyFqvy4nIego/4SiojPxkI\nffaU1p26x31svoULhJ39OSg7JO35qlF/sa+hND5mKIByoz8HK14owNwcJuJr\n7ZLi/lOUf9ynrixMzBwvdjedLmwkpruVnISnaavdEM5ztNkXxqKMMEsbiILQ\nV/Rc0DWqN8rDFDY41XCqgcm4QLS/vQnJksg9mo+fvC53jkDoX/LgyBtwYdot\nKK1ytHu2bSW4JIaCbiEJcZsADflLzfauXJpu7AulfhFJyeGj3UfjZ8RaRQ5r\ngQi0IJpqgPHoykJ89JuDW18Xz2Lb7l52S7sNT+lVueZpR3kd+08W61UMz9sa\n1B9s\r\n=YgL3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQu21lHffyzXTTmNajWWSjBHjLohMgwFIFe1rs7itoNQIhALB8MJ+HkzHwXjcqCa/eypHmfE/0qPGtdvC4Bu13XKrY"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1-rc.1_1559893714147_0.36153585548746037"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1":{"name":"@wework/react-floormap","version":"1.1.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prepublishOnly":"npm run build","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","eslint":"5.3.0","eslint-config-airbnb":"17.1.0","eslint-import-resolver-babel-module":"^5.0.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.2.1","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3","storybook-readme":"^4.0.5"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"c710913f470ee36fe5263c59f424ab63058fcd78","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-fnFl+0SxJC2MYMlkZAehY7xYpMlejeC+24CKWdVVLot8ZlIq4oR7HFq7Mp9LqhebvyR2PUirSPvXVDghan3vgw==","shasum":"03d10bcb2bca442f9d99ffcfcbe0d1919d6aab55","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.1.tgz","fileCount":16,"unpackedSize":55168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+hc+CRA9TVsSAnZWagAA/ccQAKPm7DuVXyDKGvT30dEL\nm5Hnm+B/Xa8FHSOTSfKvc9b1Uf2sldoNIH00HLQ8KFdKzJ6zRIp6K8cEykKk\nVmPAxnwdoJLSm0KTVCKDeVl200vLAVPtLDt16cnJwLxwijbQUF608LpljYCe\nJXsINi/Y06GN89BxGHb9F91Eyq7Y+t0J6BCFMT5QZDxhZZX4KrXsZMf9ST12\nrEhzOsxzpIZqobojiS0n3UuyIAc3MzpvM0oJyz5iiCakeQbRguBwu4o/SvLx\n3ku6em8XDft27MuCYQwPJqqWg7Q955tyWJnWnWWmDsk2yWTaiPysW+AHBwYy\n1CUrKI6r4CC9yC9X1j90DoouE30rjDePq7jnB9bK90i+mDCASS+qPRsot7dV\n1p9y6oK7p6vsqUmZi9nRCzOycF3LZjjcDRcVLsUK/nEbr4lEJdPl3c2pHnBM\n1/oTDYkTag6Pn6O2h1whSwGa3TwrPUk1HmDzqnJsYkUDbp218RLUS43N9AWT\n/xUvEUw852jE2+WK5UdLgbbkOdUxhK/paeiH+0bXWmtLy+6R6r6XG7bX1WRE\nbyhG8Nv1W5cf2rBkzTmvwyeqVeOelgiPEFjff9m3M0C3wmR9HC2vZiLnbPMh\nDsgFpkOX99oBr2AGntJG5rnWs+2SIXHiZjy8X47DeZVpLeuWsCTxcu01E9EW\nEXKe\r\n=gtFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICByqq6C3ct9Bsc3fmQwUhJiSjdHzpKkPhd1Tp5FnxJ6AiABpz5rYNZXjm9dnpe6NEI+2B3k+jmN3sjFxSuZG4wTxA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.1_1559893821983_0.03847230176523686"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-next.40":{"name":"@wework/react-floormap","version":"1.1.2-next.40","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.3-next.40+36be733","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"36be7337d179897d31d07c0bb77c329da9e02e85","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.2-next.40","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-dZMtS/hwnClxjGibJ/Jplv3BVMED5qsAJosDvRqkFfk1Cjbl3pLV05uTI0jFTIxV3mrL49cjVLmPKQBMNhGkYQ==","shasum":"9be3bd904088ac640d9353ac87e04f8c5f93f14b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.2-next.40.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/bQqCRA9TVsSAnZWagAAQ6oP/3MAmxwQ365W9moZ6TCE\nvMHIBfhHbc4JXptDv0l7LFVq7LnnkCDCQ2RCgkv0xjOX576bTCQfmCBkl6P/\n8Uc5fygkzn2/ExZE/j0nHB7XvG1qvMNTbfu0xKWXrTAgIe6/0BELcCXcToDP\nLYm4eJnwWn1nZnPjBiyzvAxpviXXsA6TYkaFwhcs458EtEoV/s6Ed3iFIRl4\neCOjQ7dKk+cxWPSHsHlHXW/YC/LpdUVHMf+YHvdkwxKiabnWH6Vgj2V5SGZs\nZDDmOQj0Teuyyrz9zm8lN6Yniam6j2e+873Vk1OJhYrgqjHDiTvekRkpDZfx\ntdAhfeb1syVw+c4fC6zxISPuSXLtnRqrQQbROE5OU/U5wJJLJz7OLOHWkis0\nZu8w69cOcyHHJLpQZY8VGYabF+1/cZK18NcGCP9yQNGVjNO3mI6/4NzSJmZ2\n7hG4aK0iLJUJfZnNxnqPKzI8M6mZTjt3kn0k9Ags3BF7k8J9Mj5ePXh+vtQk\nnO1ZPMrg5Nqk1XfF3CxirhFE9eGGZXBIcQylJkDvWJEHlMguRIuHs2ZD0vYD\nEfRuT2LQCatzKYmO5KfqqTd+JPzeCbxgsJ+Tp0QbRk2bDoSmfPFOvVTuIqhr\nMStzU10lt1aUb8hGGq8LSG4OJ8A5oe/UxtkNia68V5HrWwCInNwsgMtJGeVp\n0oxd\r\n=orS4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdEOcn4vGvqz2OQRyLmvg98HKDClre6Lm4ZTRepEo2WAiAuFjHr2pQ/Sag393K1y8cmYb+0xul1g8BwAjzuI+0DLw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.2-next.40_1560130601553_0.25151224724408405"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-next.44":{"name":"@wework/react-floormap","version":"1.1.2-next.44","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.3-next.44+30ee056","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"30ee05684b95eda5142e38789934061ac327e946","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.2-next.44","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-1dSyuW7rfAz4OACKXNAMNvg7p+mMN/QCaGiNvDq/xZ4qWpuFl0faFgt9ioQXpg2A6Uo/z+MAQyCmvLFC3rv+wQ==","shasum":"17fcfb8b10a57641eb756c7fc6034aa672f17cea","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.2-next.44.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/fP1CRA9TVsSAnZWagAAmzAP+wTerLo2maERDbYTOHur\nkf1pybUaFfUunwRtlrCVuxAwqrB2JNT0+yS0nS1dClgBcfEFcN6uPQgj5bgF\nQ7fXdd01vmQ2NZt5A5dD4yCPtxnEyrMt7Vr/oVWACHbp7lGTQE2V59VnDITc\ncvlJtXfSCj79CqY+JN98FAdQHx7iCa5Ngsm+e3oHDkSNYT/VmMQpa3i2q7ni\nryR36rqewznnLO6kWWLASRyhgoe9RK8i4lB3Cw/el4WFqSic52cgSfhcS8xE\nM06B4hucLOu/zEGj9Jojq20yzxpHLqMwuGxJOZw61v14HrJK4hYY/uxg7SNE\nKqriaE/zzsfBxAaeMq5G6xanV+SDHhtdwmZ4xNEkZJoF5YwZgyP84vhKzkuX\nDCXEDDV+kLm4pqf7bo+LNawjDl6lj3oyljXHRuCgYbuvZCuqDg6qTiLZJnEn\nErknKa7j4uZPJzywJ/7rr2wSEwP0EZPQJbnY8KEsZlSiLFJDMKYUdBEIUBq+\ni2SIW4UqKgEcs+iIe3v1yxbr7Eb6NHwqV41NcLQekNFJ2rrdanDvMM9quNR4\nfcsPE2fv0GHf0kDj3u3VRY8wdHJVLDCkHyTw0vqU8ZOHBL1X1ZDTspUsmf49\nd215J6r1i1Nh/RM4/HYXbP/kJ7IwxwCeE+0pIekENw37ShQXAsXBJXvLJMz0\nUXS0\r\n=XxR6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoMN2IYP9qWIvMAutvi3iKJmcvX9S5C9LfIU8BtrI2swIhAJT6LR8ZH8lH3hV+43mtysjjD1vKKMMu6uZh01UpgJOC"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.2-next.44_1560146932449_0.20463324365135338"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-next.45":{"name":"@wework/react-floormap","version":"1.1.2-next.45","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.3-next.45+52edc1b","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"52edc1b4ff29c2521203f713ae8c006fe8795f1f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.2-next.45","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-xpVfd9+n7Qll4uO3syZSRThsXgwfvBVEx+x0tE2EBbSi2k/UzOHBlZZ/JmeYZ+XrQgNqsqFKnjExEEirHFMsoQ==","shasum":"2acb662cef21cf1d75f879470a2423f0c9e18c57","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.2-next.45.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/5FsCRA9TVsSAnZWagAAeVUP/25qgn4zQc14uooF77Te\nV/7maslo1tRl+R2l20VNLud45Es12cY2kjAINXbRBe68nNxQmvSbvjm1IpfS\n64hLUEE+sYPUQ2FB2woo4GX9FOjWSqK/UivbYQSo3IzQTc4FqTqe8uwddYbT\n13XUp+r2kXDOuP0wJ/B4cDvASxdnWS0rRy+P+moxTnLEYAYJuZZKDPMfdSxx\n3oHInhiXDiGUWRPmGrJ9lvJq08c4hs5tRBx9z1Yo95JXJrc5veJq2PmC41BH\neQtsA6wWP8swQqN2TgEkBsbJHkS0+UAJYJBlPMMJ35N/maSlfywpwkK1RNsN\nyailxSYiDu7fXQDlUXxYN/dJeWED19cre4zXviwh3giokNpoUimLTJyUmJLt\nX9hYqWX1YHJbdKVt7S0j0cL2oGc38ColQzzjQBFtQsvtkor4ggFsy1isoyDf\n0PBdDIjb/lqWFB2ULg3aCE2ay4VbZzC+xaOv/6ZK0K0dx+1W6ba3FpAzZtnd\ndnvzihgpNpTkH/xDae8r5QTAg45oA6uaz/+smi8xiAPUITBOTXnzP4tSoXNN\ner/aebCKEjdH5Tg8YNtVWoL6wFl/3ih+4+yt8ufyvdNS/lzTBxc3L+e3BGfE\npxf3sQS9/B8s6CuEADl6d9ony2HtHp5Z9iulc68b+sF5d2bOZZp2p1ilEs+L\nYnbF\r\n=olvC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjaGjw/AnabDVwr/0Cg3URzUiph2XELSCsadHTJwmLMAiBGkjLHiRKaNT+eeAFfrQWZVW5QXMSGhbCuwA/z79QqlQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.2-next.45_1560252779481_0.927433415181105"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-next.46":{"name":"@wework/react-floormap","version":"1.1.2-next.46","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.3-next.46+904aa1f","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"904aa1fb91e098ba809a7294a9f1442fc9aa773d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.2-next.46","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-zGBm2mdbaIatrWpjE0Djh1BroBYonmPn8jRSLOkT/dkou/6Xklf5UhOcikykaXmcRVgEApisaT+adP5/IMzuNQ==","shasum":"fcd82f55a2fd7cedb00f0cd93c5a640c69ac0ca7","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.2-next.46.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAKW8CRA9TVsSAnZWagAAtHkP/3DUpFAsMTtbWtY1oTUb\nYIi43V+HhBsY+1AsbNKm1+2IcsrwJBIAoGSHA+IVUlm+tMLnN0n8ay8QygCU\nynBGYlgzRcoOGW42XBBMVFBkILLqIr3KKUBKLm0ScAVFJH1K2i1WElHttMwY\n4GmFKf7ahLH/QilhpnDo/E3BJ4vim+cVDBN3ZZDOTkoZqaKx1oeVY0TzdTVG\nvFoYgDX965/VnqGzBmvFciDsqbWAiVbgimVrlj6HckIwYGu55Y0cpECuDlcE\n5K+HM9j9IThE++8dJAnf8yEFIHqmQXVX1XhjbV3JV4L1CdIJXnucZyj2lpVI\nFgj29bIAxl5LgOC0neiTdpMQHES5RSz1fq+aS7jhxONT9+KEhOnHoYOUr3+5\n52blWH9gPjtbrpnGChLP5/QYauw6vHE+tqqtVbm0E69PD9ip5OpdRHmurXO7\nZNZiNuk6Ec4XgaVvuR5bsJcQVrXqBPPc/09OFpaNjDDfw8KrZEJ0o+wMJ/wn\nMeVKLh4QWIlVHlF5JOFgDiZ5Pv6v71fR3RuqxTeIR+H+khTANho+Jyjv8JJg\ntHS5cu1dIQYUncOsJ8/Es1bHMVv5umM5iENZQfRELt0j2nbSa43p96QKtkPE\nxotqrzmJMKpU9Ikp+wN5rpxi2K59vlqYbIAX4duzmE0BFJBmfn7USSW28Xdc\nICrK\r\n=oUkS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSsZX2sI3I/8pg3fYECfIsyKxZhLSfJu84SA7hHoztBgIhAJcVseOHbL7c891eVJTY0R5IHO6oBYjPWNGNisifYBuy"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.2-next.46_1560323515359_0.947209659748893"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-next.47":{"name":"@wework/react-floormap","version":"1.1.2-next.47","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.3-next.47+73c5cd5","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"73c5cd5595ab6b18358e9f01f0e1a3f516d784a2","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.2-next.47","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-WBJN+AzXlTxI6pLaUu+yf/NEEe9ApOmJrFn3g+PfVWQwZg6CQ1pAH5NMHb725YBTUk7HwQcl1y5XLbq8j6w2jg==","shasum":"2f1b63368fccbe0c8560a1f91f88e1ec36e7c931","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.2-next.47.tgz","fileCount":16,"unpackedSize":54916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAy90CRA9TVsSAnZWagAAI0cQAIwBwvApxDXR25f6RKKB\no1rtywtyKPnyoYyzVbkvS4bGvVHQJk69Q1j+WzVNTIwfJPb+wYfYZgt1jqt2\nnNtNWLQw71h5+zJ6UNu2qB7gqrU2FJvAMraTVzcIw5mCpiJpN+ozTCzEbP7k\nZ1gu/UcwLcBnnaHVnTEJI3fYOpT7ZDeWLHCB3k2d+EvKdwedTj030FHM78l5\naL4r+KB3sO6U33kh9gGmE2Luwyx9x5BayZGwo6lO3S7OpgU/4EFDU2IVyNeF\nnQvGQTPt/iBoTOfEjJmKJxt55mQNx3KPkFAKSxNrn0ydMp6r5Cggx6SKQE6H\nS08xHHbOY7ZxYgD+B3SJBxpg6XbKiz7bjymAT8nQNGff2JIOVC8Sm4JO/lmG\nom54xKjZpypd01N5jGjW5JGVUExPlfC+3ReLdTMe5FsN0y5AShvBn/RmnTmD\nCdRGMrRhEyLQHQqH2WFSD5QKH46U+IDAmnMq+E/CwOwH4X1QmsVc+2z2gcke\nD8IVB+UUeBoOFN6Cyyv/A6hYITGufZmgbOY36F6OsOgI7MBULzVvoJk/oFTM\niJ8Ui+LpYoZ/aRwUUAJp6BjBhSFfxZO98RrOExDRY6MTdoCGePyAl2PNmOwy\n8rWrbU/V/UOvsfoHCNItYMTpkUgroN6QRmwk12m8WgxJzt9QLO2y8ePU9ITU\ngQXp\r\n=i2hk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZNM52xbRWUmcdYknBNAmtWbQ+EZpCroUvgVpuqOzhyAiEAqzhU/GYyWIiPKTffZxbPrpOxeM9xjsOjWO+rURgy124="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.2-next.47_1560489843460_0.4837930118416287"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-next.48":{"name":"@wework/react-floormap","version":"1.1.2-next.48","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.3-next.48+d5f7f00","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"d5f7f00cb8f60f1f99171299d419a910cbfc57e2","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.2-next.48","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-jmlJSa8tIGhfyP+2rvURx1HxxJhEheLL0j8c9seRRTdoJW1Z86iIV56rvHnoGoNA5LvdmmSMkLjm3fjIBBAy4w==","shasum":"1cf4eff2e17525711a8f790ea7ef64880f4cbc0f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.2-next.48.tgz","fileCount":16,"unpackedSize":57164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAztuCRA9TVsSAnZWagAAtSAP/ibYb8ANd8CydZa4U9Wo\nUDWV4LRdiZMCrF1oBci5/wlLgd3rvdoUn5V722V5qYb1xJ1oaF5XN8dsxwjg\nNbjZ3+ISWhZlvZbSg0ft2Js/+0bh7K0AwjLZYKM9MrSRDJyDKppgA9sSNVYw\n6+YeSFKdQXqBF31+Fz36D/oF0WBt+23+UqHeHTKpFrLCB6hdEcdqqUnmqv82\nxDYjRuEU9SrsgyDAW9qZlqbHaTlywBEVM+0M9twKPgF6GnbjGuZ+VQAGHm9z\nbZO2QnVsQ3ez7C/aSHjN9DQL34DeCA34Wband+IdGwBvwoMUtAJ3zacoLGAT\nfcS9bIokXp3WRJiPw9f2oxMc/OpovmQyPV6vjYsV1oZcBkkWWWyGbqN5/bGz\nR7BQtarTVFYZrQKc6YgfigmyNnV+VqmSTtMDMDzo8wNoo0DuIlPa0qZ4Tmyv\ntFMj4XuB2j78ooUqE1rJ1VlwtR8+61sIS4BbfDLlpUJ1O2ecNre74WfYlDUw\n/sRCSjtHEGGDR2OP6k3S0Xy3U0qyVOkdTb8v+K+zD/RvyYrTbrcIMDMnAZ+T\nPKD0VTnkNAvdz0OuBvXe8keW+hTJovVwtzYieJ9SNxktqXCxVBPPmb9iktEl\ncT1f3PCPxl0C6LijRMqmnN5i9i7lU2E4IyF4ZXvSawIksiLysof6g8bE7YF8\n7wXe\r\n=PukO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiDDiOpbtH1kvqC0tiQ+E/RY//oQ5rC0+ZX6rjdGQVFQIhAIc+32Gcn6DZyf1EIVCRmXgGdSwIoXqXKc93e4af/7ia"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.2-next.48_1560492910126_0.6595897743649577"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.3":{"name":"@wework/react-floormap","version":"1.1.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.4","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"272a81bd024d25a2835e9d92ff3415c129bd7232","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-NthUxF6geSQ1KjFSzUzXHrQo9qhaM74mhX32nk6mR6vw+xc767dFMFBPSREnbY0T48XnrRqgrUSOFKj2/szc1w==","shasum":"5d66002dc7796ff56489187a558a776e96c99bac","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.3.tgz","fileCount":17,"unpackedSize":58482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA0crCRA9TVsSAnZWagAAwrEP/AuFRjGSx0RXsC6an52s\nTJyCzF1LlurBPkDk/XGc9/+UmPPlGhaEsbrmXMZnSTUGce8VR0xBitNBD+NE\nn+spF2qNZ8EQpEE3px43ntkrUx5f+oowC1msEXlKLrwHWPK/278PKHIlw1I7\nyD9fvbTC+EJ3SlRZ7vL9vBNM4yDhJG8yBhxTXrQYWApVfLhjmcfNE5cZr0oR\n6jdbDJQXZ3Z1NB0CBCWFqSueSNJtKU/96aZel0BdLQthMa3EeQrVKZGt+pVT\nO89PYaIplFWc+6L7i2hqdpAl85AAqd8e9WwUTx58g/p2jrjmaat9ffguOeQv\nVv35ZVxYwKz3n/liPHsyBqZ948nV2Toew2EBIXH5nmtFanJgji3K8evPMYB5\nrmBmvYaz/2Ay99I4HSu0685+RVYbHwq+LYEN7SzFAL69+GDjFl8rRplYad7r\nJq2RpPWFuLafkBztcaLEeO8QAp2b5VCpnJstOWEuI0D0Ya3k9Us3D/S+zqgv\niWVi6P1ypCHygVx1LwDuNBRbouMOzVv+3lqoUyer9zAh+PvFepaUVw0vuzKC\n+HIXvKCCDSsTxziqY61X6HARpWQsKQ51VatOhyv8HgrGMPLp5pF42BwJwTVc\ntUM++tjKKP8Ih0vD3rb/JTmiDXATArqZr9FMTW1ZxuWgUtZ4hXy3OKLsZ070\n8+Z4\r\n=FvHd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEAn0MRkQ0EdiqFeUZ4OlqdINlyi4cg7z648Q2sxsfogIhAMQdDLNavLKGajn0t1VjI3edUxgXCw9cQsCCIn4y7Nr+"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.3_1560495914867_0.18209051289279832"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-next.0":{"name":"@wework/react-floormap","version":"1.1.4-next.0","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-next.0+ecbfe61","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"ecbfe612fb94783c936c3917bd0379d3b3e63a34","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-next.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-FTnwfPhvOjHUwI1uAnJQp/llExIpY/B1bZyd0bOjEn8i59UDS9rLgTtUMZUqkyJ9619k9/U1DLiH0NzNx1LnbQ==","shasum":"913df2bcb27d91162e0623fa77345438bbe381e5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-next.0.tgz","fileCount":17,"unpackedSize":58512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBzqYCRA9TVsSAnZWagAA+t4P/2CmgQRejMRRH0y/PtTP\nYBSRejoAgRRpz9v81D05mJvbQ7CX49Sn/lUHzUoyb5655U4JV7Bz8FGIfAlg\nGBL7VZM/72dfDe1PwrJSijht+xDaSTGyQQd88kAiJMz7/DQl+m5z3vgcF1uv\nl05lUVO2oQZamIO9Mopd802asaBlRJ9fNqzpoW+oOLYNk17xo9a4O/XDi4av\niIPaIV07LoV5osspXXnzl7U1UmJ+Mc1SvmhwM01751ZN0jrl9iOgkLoqBAZZ\nBiWXpBDK6cj1vmIJwj8x47w3cpvibUQtr1MA9wwLh3QhBQyhfqEF+LOAJCCO\nx1CwqdYwZaBk0wZ9SKRd+aLD4OI8M4brbxwZTPO+1FUU5JQ6rdx3ec/lxwG5\nSlZ4lgBbgcvVoSjBkATM7okG+0B+KJCB5zxUO+WlrZpBPH+NyxyEp/y4YyKX\ng12Bx10xcfYZwaKtt+5WajuoL1UpprpLqeoXZ7JVAhiupZpKWNGosiSyngDq\nlSxzQi3A5zipJVh3Xbsm9wOX1Hetru0XEv9woup3JG89uZXjvQajZ1IQaD1t\nAVav2aU9D16A+u+QPEo1cahUwyBcRwnzIwP8VrY2YGmZXUymxtM7J+n4k+up\ny7ixnGtDKJ1fZ1bnNRGWLscMICO4GoDPcqoFwYwQKMNdOL7clBGxJBI1XH0g\nDsbd\r\n=pU6b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqkFNzQXH+rqzAg3OrjsCXnDPXfaUsmtjUy3N/dvLUtAIgGcGMEIAGBn2WkiK0jlqUAQ8daW7tWPIYte/oWZR2tVM="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-next.0_1560754839886_0.6877952223640473"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-next.1":{"name":"@wework/react-floormap","version":"1.1.4-next.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-next.1+b077b5f","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"b077b5f46b71b096b4ebc78c6b4455033827a52a","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-next.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-of0Olbx+EAXYD/Rim/ibHZHmDca5LwhPkuOP7FC6JveTjHtcCNGzAb1+wzkQGg9UjRq1gPLp5YOunCNr+1m3Aw==","shasum":"57277aed245698e7475d4f4746c7914347172d8b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-next.1.tgz","fileCount":17,"unpackedSize":58512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCFdZCRA9TVsSAnZWagAADw8P/2HKMcpBlB/jmGwEDie7\nXu48ejq2PsZQg8YVcqYw9aINeHyyS8ufzFm5RNwUYC7BHs0WRQ/sLau7AK2U\ntEzwrQRNReTYL86MebH3qeY1UowulsGscuxUfTyXy4xcOH1vTaFsKehA5fQA\n2imPtbCxgZjhF17Pgs/SNQQiig49pxInZNyi3KEDWhfveSiMcIw4PgS1hM15\nWngJCaVGiyew/18pDElHeOUGlqmLyHIOpWE9pL9sbhoY1wsEDzwzrrYnbi7y\ni6aG5+eeGNt3gvFyFtctWabyBNkxt3aX9s0r52vO0IvuJPjKJ9eTdg22guXD\n065pLll+upXcaybKq6DzCqAPCUvNpmK2kS8ppZ0xfnsIZlkQ36BtuxyI/Irm\nc4smUXfvb3+a370fUzkBiLePeuO0hC3vMWuN8j0O5etzOIziQpZx2GXeLgQQ\nxxoPYDs/ghofFYJFRJjRh/XBDwE/iL1ecfsakw/vanWbUhxxUvjL3NN62ubE\nN9Gt8sP6xww7ZTHcv+EUV+9i7OAKa/I8CzMvmqBXz0uBCWSwHs84IrFyHEJP\nxypIuipRgY30b2c2C7E73VZp0oGelCTRmfPq1kerfsWOiM2EipL3pN3OKpcl\ne+sSa6vaNeejsPt+KzsHkAcYiVt8zzVcMKL5Au4pSdi9Wt6JPpn4jIro6XJ/\nbups\r\n=Y6AF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4A58PmENdaBg+MlTnOsXm7Bb3ouwWJrLxJqTylEUxngIgNzUHbYfdblU9yxi3/IwjJKSc3lZfk++d8/AV0/p9Euo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-next.1_1560827736952_0.01730727108741892"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-ss.2":{"name":"@wework/react-floormap","version":"1.1.4-ss.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-ss.2+d2f17f9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"d2f17f9bfea6afd213c386862330c0310659d8fa","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-ss.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-mIQlJS3iPUV4jHhJhcvJ2nNrB4oUdEnz5/F1p9RdhY8kPqUz8Wv2MRrZdS9Gdi+Fkma829e9vwelfkEYhZGthQ==","shasum":"17014bad635b1fc662504c5f866d424f15895e68","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-ss.2.tgz","fileCount":10,"unpackedSize":32841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCaopCRA9TVsSAnZWagAAf3QP/Rh3XJta+/W2pv4aZnbQ\nHgyQqZSpMdhdyQib0zgWQUfLB0s979C2A/0fnTJaG+8LyXRRoAtkbYEH7B+X\niO0FUjAsg+ejb17KMTZ26TVpf4l5MAEdTAQ+92fb1pneHa3VIpDADR00Vyn9\nBfeve2l/UMYnYSIfkJ/BulZhdIKMEBs1It8pQ0S0KQIlPs0HsM3KA7df8fF1\nmPRs7wctlbtAfttb0XiiaEOFz/Rno9ox+7+sO4w68Qaw2wb6WhmsLMnGYSLG\nlR4me7UQPImbpL4qxp0CE7uPg/0OBzg6uSqv3zW0d0zhiUWlNZDBxH3jgewB\nQUQZ7ul5P8fRbMulHX2WRvMFfo+SREWtnzGp2dRejPv66IYidCAIYxEqOwUd\nU/mZ+ytUqeQuckxFj2dCRNDxnYHfF1rz0vN/RaRusXQDSyCQXktCXqMLC4yd\nd/xLADNqyTHIeQc8m1y1C+G7WvHqvD3ndI2tfYy0ETIBgEsnPF6fyasUWjWj\n+Jnv2kZpK1V9KBgWZhe4VRlzacTMlkR25y4YYXt/Wa6lFvay8txid/QX7Fb/\nECv0WnUk8lTpy23JT5PIr/PHgHMVQOY99gzS2z02Zonxl9ObQ9COT8FWvXl4\niY/lSFx6Xoh73uVlIWNLO9jMtbti82dBWbxLAAr1P/zZfu/tU9AghH7qBry4\nxI4x\r\n=ais0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnuPdJLWiQHEOjGhLRc0nUdb1OfAcaO8XG8H3CS2f9tAiA2ixZBwVp5Hi3V02dxrPyHVqr1LPtq04XGezPcUV/6PA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-ss.2_1560914473177_0.7637330041376575"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-ss.3":{"name":"@wework/react-floormap","version":"1.1.4-ss.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-ss.3+3a91982","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"3a91982b258c1182de22e8478ef9e46b82d7abf2","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-ss.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-SFkJBWvBnlAl09+k5WAe/26q9dcvBpH+Cwf8ViYWuW1ioYjewGg4x2E9CGJw+aXHsV+GYpknrnKoj0/qSiaGyA==","shasum":"9d89bd2aaf57e94c9247034ff9f616798d808606","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-ss.3.tgz","fileCount":17,"unpackedSize":58508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCbNXCRA9TVsSAnZWagAAJ/0P/A64oKEY9+WON05TTohs\nR7DzLyuE+q7On8u6QI0ByjinSNudetLrkClqU8dvGcDJtMZQYPoO0fEywNRD\n2UmG7iSdDkI8G+OtcgihdIEZ/xXBJFugVRQ5oaLtjYwFeCd9ZWZMUjy4nGe6\nhHnwofN7ew20x2lXMSSWb7+mXLh590v7W/0G6lczrcWggyjyiPq/kBBq96ZK\nc/X+XSaALF3A3mElFRbqoRD8KhoYnZtWLI8ZQgLhsdzwgSax/Wp6IhsX96v3\nkCH3EuCVXqOktZIeMQt32IyULDLpdwMXxSwDV5MksycJ+OVXf99Fv5C6ChFo\nkP0AOg40+KiDT5m7Kc+2BUAXlC9qZJeNI/weM0oflF+IetVWIuABXR8VCcM7\nNTF2kRFC+pTs8ckcBfw8/S3aL+gA8JFhnIwkANJiYiLwyGl3kmFHCYC1trAB\nU+Z8begem1WHRSaT8dVybcglIhzd5qNCe1H0mqoHapce5vRHJM1pyml8TQZs\negpQMTUX3Sp16/TexqSQoka7oFyMlH4gAzjklbFjRFicurQHzO4f4+liEQOn\nMnUNY4UDEmrOjcNlWrPkxUwcES3Pa60HD2b6hT0bkSyYZ161rTrppyey+ur0\nMXKso9Hh/evK+cLOHEOS8UE4pbLt9FIbGuchMN991DgfGwCAJ9N/YC5xo+cO\nDgdD\r\n=YJ3N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlwFPVD2OJhIfsxuYGT2rCqeK7uNr6w8MszqTi0DQDPAiA3k7Cll1G/RaC8jEtf5c/DUQ3RL32gOHX3LRhJlyU35g=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-ss.3_1560916822709_0.11461206111549993"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-ss.4":{"name":"@wework/react-floormap","version":"1.1.4-ss.4","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-ss.4+244c7b0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"244c7b09a495a295f4f7d28901b5f4a9c2e1d3d0","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-ss.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-E81VWHtWiaJkDgNEjuvaCG+K9z5SA+96hcXv+5nPQ3MwaRjlK1NWsbkW/a5NtaHoQtNQdtQ3oRbIKQrc/WCDSg==","shasum":"bfd09bf07c79bfb14923ff8740e67a1e6c1b00d1","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-ss.4.tgz","fileCount":17,"unpackedSize":58508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCbUaCRA9TVsSAnZWagAAjJYP/Rv/24yzkx33nPUQz53t\nvnnRZ5acp/5jHwAKnFEWw/sQZVHKoWqLdgZgXfRFe6OLwoCiuoU47e9UhMRP\najavjUQHbCHw2DcSqh+c/M2CenpgYnsNMkWrENy+618Qw+leS4Y5L0AAckpK\nvVHp8cjMFi+ecbpAQ/r1j9fqpdeG/kVgOcGb0rMGOvEDJhjDugth0QwvpaSh\nWymqWywdxUBWAjUtztmWhKn+ZTHql492pDWgPMfM0kFPpn2/3Xa3Pj0AkJSQ\nuQIn41VZkiilAYriCmGoTZ8Y31DNbrXeeA/glGhD3MLbRJzW7jtRo0uHqZ4a\nUGm2aD1fIBp8hc/P2f5XbshLRzlbiva4vVWLIhEpBBrK2rw4/FTDNjsNPrQF\n5UdLLY56RGXH40XQGNdC7xpEGmCQf5plB3WpCXmLcp1OQDFEL6+AokyRn40R\nJ/ofVP9NMKnoblFfod59vE4a+oKFqJBc9DHF9uHg+ACqtviDkWgMToeeOtXv\nElpRFYc6vBVO+R+UtjhNDQYIlxK/VQV/0MciTYH65KvfDSN0cOjkr82BHH/4\nILWvN3Ftqrm9ZA9usXFstT2j4RftMmaLKphMX5fVluMiG8uM6b36CjWuOMtH\n4Nnk2vIdopcebzEMO/HMu+jSd05eAQW7bwSEjQGyiqp2eJkQwLa+VW10WTIz\neULs\r\n=AgXe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeclWE0GZo5Sk8dO0ol1mcnOhpKPXfXbZdE5F0jMOBXAiBw7AFkASBrpIQozCzOEz0aN6sL60CWIcmgthSq8aOQuw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-ss.4_1560917273476_0.4647388641685435"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-ss.5":{"name":"@wework/react-floormap","version":"1.1.4-ss.5","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-ss.5+7775e4c","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"7775e4cd55b18f68dc787ee1d840ee96f8ab3b11","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-ss.5","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-duKZWR4nsqVZfR0AprrnxhjrL/cs4rxOdY3rEzfl2OQDv2Zl89sDnrnL8A1v5wuis4W7mmUMy7sr7SCm6Jpy/w==","shasum":"9fa1cb28b097f40618905e24121a24677f5c7085","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-ss.5.tgz","fileCount":17,"unpackedSize":58508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCbZMCRA9TVsSAnZWagAAKC4P/1I3E5GUQJEiIOfDGzpw\nwAs9B82yrXt4/zmuowk2ElSgboh8EmLl/idn8mcADJaBjl7kuxmc9dkc/DqV\nwaRyn5cWHJF58XZvjPk7YFKuetx0AiADt4umth6selitOd1mHxW9oZBwcPLN\nvbM/ihbx1sBGA21cf6wE/W0b+bI8Z3Mgp2CS8YldTYQB0TwIBQ12dtwJ0E5W\ntMYmIR3WdJp4g5OeSGG52lYi4R2wLwg67AGdMJMTuppeJRwJHEi5sFCJBAq7\nlShY4AZan/0QlLsE4Eg2dencHM1rQe8BgE691ww2ygCIEDA/1VNEn0r8oXWe\nmrsIaSWkE3usVwn5IWkdHkDiTuB0S7xjywkto9+LpE7VvOuJoYmZCXs7/CC3\n214AuhVArfNgRYdjN+TZZgz2JatsqxmcGAi9uj+mGrNsjTWoKt77Ry0f9LQo\nMrkM3A7RD7PJnyvIMTp01yh+bseLjGvH+PnXGqncK2ucqIq/MlsRE+QHb6Ow\na81SUQc97pAs/2DslKxNltMFHxR01sDtDFtop5sxyvgGsPAtqpTfb+FnCn2I\nlQu130Yz+nZV87440ZjTZ65AEM6elUj67pqRZmLdO7fPyJwM0PEjCzVbaO1X\n46PSthc1JdZUKe9vDbalo61P/qlDhoqkimxJQo9bIZZSQEwgFV2/+8vZvJ6H\nlXlS\r\n=0ZKT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqWxexc3oNQRLvg1byBV065JTyjReP6ZCecSAhKNycJAiEA/E9InJhgwVwt9/nZlddQhB2Lb3e9270qbfjJv2PDqJo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-ss.5_1560917579674_0.11010992304910205"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-ss.6":{"name":"@wework/react-floormap","version":"1.1.4-ss.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-ss.6+82c004b","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"82c004b15aa5bccb9cd2feccd095b5a7d4433521","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-ss.6","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-Qv0O+/nk3aCPkS7iTWrdeNSi/ICsrarY391KTqWcLd3enHI+CFSSrfuVhdd9mAiIUiuXzFGhXGxooJN8ZWyxaA==","shasum":"a2b8d2448ea7ad3edc203a3e24ce4b1dedc86b0c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-ss.6.tgz","fileCount":17,"unpackedSize":58508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCbw8CRA9TVsSAnZWagAAwakP/3W5r38lDDXLer0jQeyi\n9m7+3uwxJBKDE/VIhYQLCIbEVSHZ/nNqsm9RN6rOZeUj3P8hliJ7ovPZiHWN\ne2uGTOP66IkgfnLYejI/OVUWw6vrhspgoo0MOmGLmhp1ZPm9+NJZi7vNIzZS\nQrtV5DCG6y45dAoybOz7EMsSDBrub27ED+/piUP+Shm4Zav1wYDt37InbnTd\nOC7uijP4eJAiQnypVeCIOH+vH8dQEfF21p7wk9O13E6pghHXttisVqaaY7mq\nVIdShlOmNaaIL1EvhPwGnoQOjrbfXckEUAn+Tqarxq99WZzdPVQeWv90nmBQ\nv1VQ0M29nJGYCsKp7u7LwSbIUWZnJh9nxUx7I33ExvBPgd3f2tR83UZCrpZN\n53wVZ7nAlFVY7sWG7QGwpjgBGU8unxvXo6k/BXh3eTSr6ozZgAib+fTAgEZ5\nUaugrYUvUQ3uGVm5DqaepVCn6bJcdazfc10cIeX6HDSxOtYEoH+tOu7B7OwO\nV70FOtNLpRhrklcVZZ7z1uT7vsVEh3FtAZW5M2buVP9qxR0xU8U/lG1/e+wE\nBJ79/Rm0vHA7V5WpS8OXGGYNM+cQC6PowvJCLRDAeURcOWJ2bjj1xmX20vaW\nc+LuaUJkXiIfgxHYU/5iW0KPUSLi/c7uatCa3k1hCucVcmiFqfL8OoK/6YTs\n6q0v\r\n=4gHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdm2KAwvNKeYTzaCZd8WtRGBvIetvtVBk0T3JR9YxGKAiAbDNX6AXKRWmjx1+ZX3OLefzwtZj8v9wQynqU9EEWZCw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-ss.6_1560919099629_0.7943206610729807"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-next.2":{"name":"@wework/react-floormap","version":"1.1.4-next.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-next.2+2a89c0d","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"2a89c0da9651e623187a62b872cd9d58c110df2b","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-next.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-J/pBbYagJdepIlM1tIgc1RFxZjDbPQgjEPherr18X3sydJlKS3Q9qh7AeGEbtiQigbDWvhikj2Sd8T4w/R1Nmw==","shasum":"b0136a36e5a21ea46e03362fc04936ff904f96e4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-next.2.tgz","fileCount":17,"unpackedSize":58512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCcH0CRA9TVsSAnZWagAAnQcP/36icDWvD+IyMlFbicBz\nl/FQHZGvqD39aeWmLGV4CcQ2HwkgYTVb+9G/UdZGEeY5L+bK1mNEQuUqyKHp\n6YRdpr2L1UFuoq1bA0dA0MUmORSyhMK1w9XRE3ecPhmyq+PjOio/U5gcIoGI\nWWr0wXQEQRmwXI6D3tAaFGHI1aHPyBYyiR7fRGiQYrHEAUp+x3QMPPBdlfoF\nESM+T6MURZXLJIXkaISbGXPOvJTXNkQcsgSoFTxTnD/V39UNTtLcJK6CBuxA\nHCQNttjlFm9OslnSNRxgvlPMXtyLrrcPVyWsINnzJWbLjIMbEUnyidB6PIEP\n6I0kr6kFPahVycUN51RjjdtfQffvypq6De/SgkIJpkjLDp2A3/XcrlbZA/kW\na57xQZrCXamN9bLD4kCUKY7wstCq/tCb5nsNmnshFxtH09ozEYLdXhBh5p9W\nBt/a6pgY0cpWOJUIFQBWPwH+FhOXf0SETlwQ1xqYYuZ9eQCZDtbBzobW54tH\nKLKZKs854KQSvTmmed6QoljE5mo0SAcvFOd4KJQQdwLIa1kDeeGbY9/uT9jO\nZSZvtHjW5H6YBaQeTwb3jvGjELPikFtxeQxZ6FTUFtE50TWlIGx8E9TOczP3\ntXRPR0HJhvx1Yrn0ejr30UVNBBjycxTojLBYlO2nlo2D5NeLLyMVnfu0xvyT\njOEk\r\n=nOwa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGtQ0lPGXFqW1hstqGXfZ9lFSdhJKB0ukMjgkhSalFIAIgbRyw4QdhHseXsXPMSjq7CnEqeVsdtClP4cHdd3rWsXg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-next.2_1560920564026_0.8114140466772539"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-next.3":{"name":"@wework/react-floormap","version":"1.1.4-next.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-next.3+1eff8be","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"1eff8be63d7fbdeaf524aeaa5205b833526d5c32","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-next.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ZnWumx5zPTr0OKHb0ckBoHBiXCh672xYhD9zv2Kyk8i6KL6XPwQm4/W9OS+/PLYKgSp8RtVzzzqpLzqeC/Hn4g==","shasum":"315350fa329991b201ce3ba40ff9b1b57a0cf7fe","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-next.3.tgz","fileCount":17,"unpackedSize":58512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCcbiCRA9TVsSAnZWagAAdU4QAJrS6j++C0UZbUspqwio\npzMcLPW+WWaU70yuKMWkpcPi3F17jP5UvtyqlPCXYPgNH4megP3QzHwYAfVE\nU+SLsW+L5bFuIrq2UtT3Tf3xICU1Tnr5h0BzyC4q3U8mWTrjU56TS+rSQIwJ\nfHB8nMEA6mPG/abHXhk8ac/EmSb77cwTpebD82RDQ8E1EbZXy1PABab458+i\n9ngXBIwWFK83gIZf4t2m+u/Om1xhx6D1FsTwmkraHysIr3oL1s1bPdZO354E\nQsFgZgVOlCqwI8TiHBEokYTUHEMPk6gjUJ42AK7I8M8wwsx7+FHk9jN7PNOC\nFBu3BkAXdNvzmmLpOcP+SHkOPQmpsw7juCn5wArK6QhnvZfY9M8ZnZCQRRJu\ndZD7hHLxZDsLiXvGtkzdTbPNlnEPg3dJXbk/ZLIPzdWxOBVsR+Vx0269v0Lh\nRSdfnuqCLxE0w3y5kmx42SQdSvgGMiwEexk6rO5mgreOZbztaO13NbAdvFUb\nnnTKqwqicoCBVlFV8GQw8K9tZJYyONoulRrjb3/tE97imJh8qTukt69mZLEt\nFl6aMpKAEWNguiFzyXmfjhKwXUk0SkYVgWM+pyTAVrvv1xMSczTcBogRolFc\nFGGOZcON6voRHbrloJbg4ZrPnhktyZKN/eUo0lL1fwUn/4v2RyFNb/eQVZpG\nTvVp\r\n=U57W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUwmMV+FgIVyV2w4WgmCwYw9q3O1NqlwHxtJY6NX4hlQIgAX1Esud+zK6gei6cHm1jyaKOY6Uusz40bwV1trdgBD0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-next.3_1560921825570_0.9075261408991693"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4":{"name":"@wework/react-floormap","version":"1.1.4","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"9946a5e1b45480a90ccab0c974d8de09c9a44669","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-qfHNtOoQggo/VDY3HMLejaRGL0YbGrgGMrD8CdgrGKPUadMNlpKzC75IYJp//E+zatzpcOj+I4th8ZJ+RQ5WmA==","shasum":"d4f15e2a61ca599c4d22cc0d4559c24d1ddff1ab","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4.tgz","fileCount":17,"unpackedSize":58588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCdtRCRA9TVsSAnZWagAAdgoQAIyyh1zkEjHGDN8v63aO\nK6vz6aVvAW6s0RwH4UNggFMRPGuecEjy3XoMR6ER24ONp6NfgRJhyMF6J91K\nO3zUt93yINcXN/gw1p7yZ5oyqVQQlP0pDpoRMoN9R9N6qofRuvd6L14mqiJF\n6ho5ynlLr2fg0Ru5GpTlYvdbYYroVFcYMOqQeFG/gK/FHaj0F7y+sopdSszE\nVnX3kgpakB6X2q42xTPwcmOoz/ecXvYL+hqxPZREtq1NVvNdkyz6v9XJAlxC\nLGufYTldvS0GXI5kRDzt+LQwrmwJ/5DBCuekGFowkUGRED5BXMjleB2U99vV\nOWpymeAxj2ko+PScTXO+ugldaWp7EzejVxbt/6azGzGHtu7w5IVIFr9Y0ahl\nrBSykwYnRJNiuFlFRVCZzHzVk8Ui9o40Pw1j6USQiSrLcHtqXFiDtkCwA1tn\nicfjqHH2M1JGEBJReAEYHaw7cZ1FTxgCe3SOcXIJ7f9xWqWVtoZDPIdcLtdV\n1zzAne+W+nXCkiCbOzFmz0INXxrPI7f6rWTEJj25/FBRNL+dnLdKdZt4aulz\na0zeIVB5gVH4kM4g8bZGiugowvSiPCIXujG1qFV0yb9ubcJYCtvxxykwLIMP\nYy0TyKFojhJ/lCeUe1RwpY1a4EsjaNI0/1D+C78NqF5+MaZ3vel0OJuMaLXz\nuyU+\r\n=AzBw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSj3WfnqUKZPqPz+ZcybuKUy+I2NIhZxq0KEtApWkDwwIgBbjBdx3rnWeYKVi/rbfxS/IXjjw3Y9Ed1G/ctYzXpHc="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4_1560927056778_0.26245268337443517"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.5":{"name":"@wework/react-floormap","version":"1.1.4-rc.5","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.5+f820b35","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f820b35b675e953008122d9b60d9c79ec0865d4b","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.5","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-IARPcWjYWrgsimR9YE/e14cFFEMww16Mam8ibCMeo0ZricgeZFPgpnk35HAu+OGDF/KmEeTJy5dDARaQhQifdQ==","shasum":"486e93fd53ae0c0236d1486957c2e92e9a15eaed","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.5.tgz","fileCount":17,"unpackedSize":58508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCgFaCRA9TVsSAnZWagAAvIwP/1qRqz4Nb4q7IWSHV9VB\nfp+SPyh6378nDiq7cr4EKcuQNOeaP2rcfB9zcnpAcvEu9Kbd8XTU52qFmebY\nzvjPReM4mWUvikgd3Y84Gqj2vl8Z7qq1mG4SbaP0GBU690wjSw/lEpk0v/96\nyXFh2GRX8FkKIdrxk7jZyi4DC8QIDyBl6C4qDHMNjnsOKEt4cMmquYkKLZcx\nLFJ4hpbQLsbvEdf253q61Zyikm6yX0cRGUQVa5q6eTMz+0PHi1Fiaxzcv9CZ\n+CP+g9yEC7CQDJOse7TreuQCv4jkSybW5+rqrCc7kGyc8g9KjljK52jdLwPq\nmXtsIYWbWi1OeP1o6fmXt8a/5OfoN4c1qZZcUDLabY9VKxzdrzeuJIkNvgkI\nc5E34skvR7lI1yzBe9pmv1QX8aMIs7KCCEwTGBVQE+33haeTBrYNm3u6uyJ+\nlXVN49j5978necP2nl8rDYA8swJ7vRIqWjubJe2NRqH/b6iSxgWrvlc1IB3f\nJyplThj1AZdXCdWBQPprTSRedPGcJ8P9OomXDchCsYl68PweTgIwISPKxjHI\nTC3h81BRY4qA9NKRRTFwJqc+F3yhf1yOl6PlwrBBUJZ51cwx8rVYJzT/AmPA\ntEiK69PhYky6p0OCfi9yg2PIWC6YNE6xCga4XblToBhPnryPSoup8wGVh0ua\nN/xH\r\n=iHBO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMToopInRcE6MaQa9DmZTsYoWIYTg7JaFZy/pqd5RHMgIgFaHd7egHXJJavmcbZY63pdrSWb/NScIiyhOcqk/Z8nE="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.5_1560936793865_0.450034941011624"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.6":{"name":"@wework/react-floormap","version":"1.1.4-rc.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.6+92fd01d","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"92fd01d261438ac9b154b901ea9f862f52f54a15","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-e39TuiJhLxgIkYoinM+k5QsKFqi/osbkmG71DjKqlHG/ov54CS5RkbyMRKP5xToQO5uVTTD4ol201a6j3QOHRQ==","shasum":"77e983d3864dc841ded72f4e49526e9fcacf22a0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.6.tgz","fileCount":17,"unpackedSize":58614,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCgHdCRA9TVsSAnZWagAA5IMP+QEhoZgzLPi2KrTh6/VZ\nE5Rai1ELDsFrlslX+t29IpCr/VT0F67DvUmKmAgDbJ1l1OA36d1wKYjw4HJg\n3IZgfmay63Iouk0r4sEntql9FRtfsOB2pXo9WJvHr+0FuoWDmTqIYZcRTk9s\n4y8xFIzyJ8iARfDw96uVVkaG7WTcTJgDFUNKXru1AbTAKwjMcSxM+6YILf4N\nMwgjmu8Yztt9rsQqU0GCUCOchlUsRJUiFUJQHP5eb8KsSpjdpmxAslQjflIb\nejvukywpDr0l3AlFce6wtmC+HrA3+1Ei0nS1y4OVvvX5lL92BnxhVohZskO0\nhaelgX4X8RMzJMyxlkBDmOCbLqv10B1LgJNR8c0roymhPUMrlDGT/+iX4iOc\nkV//TkFdvgKTwVxNBKolnDbBjRVyDOAB77VDeyYOVrI2gzxwO36yVvpJSGvq\ni1+8tniiosplyWLE6g1fjM4KmsG0xOUUqGSAvgpKVNTeH5LcPJxKNhmGQxEo\nRt6vlUh3oHbFC95dNNTqu2nZnGKmpPwjFfKLRueZZhyMJIgWQnx6OXUTZkWT\nqxJ8teWnXuzuykbO8Lvm32egJ1l5hdwdmV9CjIWy2+fR8X0xPugBkRgZ7qQX\n8yDGAbROPhq8l7SA42Yp6TTa4WAB+je6+zrbA0ZQT9VUz8R0fn6rWGBWHCPv\nmP8L\r\n=tSZq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlOMgQiKJsZ7yNibdquYxAOWQb897u86t878Q4wItr/AiBPmQ5pIYhDq0ueR601rRy+MYtnQ3Vuvbi0D98ub6sEGw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.6_1560936924839_0.6102090218615015"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.5":{"name":"@wework/react-floormap","version":"1.1.5","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.6","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"623ac7dd1246333bdd7f8fa3bc68cecf3cfc1d94","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.5","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-tL94BgelcIDV8IuPMN/GdcpZVu28C8dF6k/hGcqXxZgu77Ma7AOIkXFRc7KWlnnQAW9hjK6/FbM5abOGfPdR+Q==","shasum":"420109a66535d4b82af875e5ba44efa27568bb09","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.5.tgz","fileCount":17,"unpackedSize":59046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCu00CRA9TVsSAnZWagAATMQP/j6jETsYkOQN/FvCDPzC\nOOdYv5O4LhEffZFvjaFSWVXgrkifeAAtwTiqhvNKzfZwrwr+LzPcmGheTTZA\nNiLCri5OJ0bG37wbMKzj5lk3n2RS667m6nzqCZaGqLJOYE/Ga3J9w0DbJs8A\n1eXTUj9Xj2NlQOhmIZI6sdLrUuOrTc8TJyqwCKaD3Lt41l7nO1Iy3RBtXkH7\n14hezgqdMEdcKFb6JEqHIAwRsPFtCWYOd0kp7lkTdEpV9uJR3puOk5oXAavE\nAHJJpLmyHEe3hWLIYmCWprS33WKoPelJ0+1OO+0yVN5F7tRjUERqctcLSO7A\nXG+I7ZDSf0NLISwoN/kUQ6v6RGZhpA/Fl2xL50AqVgMsNj1GP1NIlt9vdH66\nB4clAcuX/cdaDqcFQZAePKGDi+sxbnfxSfLzbw+00vOWx8tuO5ZmkZcLSygI\ntJs7w63ZZy2BfCgmmWRe/uuL+JankOqTKW3USVJ1BwZqxXfS64ZbsTOf5MhE\nX81MGuGjYOPsse4oZXC/1Fuur3r8QmzZsDyX8iKU+r9R2A9PkfBMYNhR5HIp\n6cBYWbklnh5dTE+7/sDJJFI+KC2xQcDB+B+gAvgaPHx/5JyCV9Yz55IFCiSQ\nhQSu2emRJ5B5kMkvhrGWIVXueoL2coO9reORDLmwT8Cx76+2/fTWPIjDaY3L\nK99j\r\n=HesA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3c87nYBg5Cwervnz+og9HzYvZ9I8fKcY/SBCKC1MeQQIhANM47FxmFEDgJqCdEoUVrADjLRU558VKUFE1y3F+OIiM"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.5_1560997171392_0.5557827533609379"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.8":{"name":"@wework/react-floormap","version":"1.1.4-rc.8","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.8+747ce2a","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"747ce2a066457a34b5d4f3326b30f0fe2d92b8cf","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-RVxqaXatzH4N4sgneg6AVn1L08nmq0LdleT51f8bPS+Cf0kSIt0v7PKEibxXRe0X/C1e/ix1w8FZr2sUJpIY8g==","shasum":"7608f6e94c593c6fbf76cc71eff4ebcf9da35f0c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.8.tgz","fileCount":17,"unpackedSize":59072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdC05vCRA9TVsSAnZWagAAyYkP/0Zpmc2m9dy4Eq3Rf0iH\nf8zNjUtrS7tf+3GNXhiWOu+kT5wGd9tfZ0K/OSCeyPNx6/cTuK8vnEGiX9GK\nKC6XRV/NJ3nwS0eyIjYTvJJpSQrVmb5PECd6kF0XVGLzUw11JjvrMHVZF9bs\nq0O2LZVb5trJpAvJncHay0rT0wzGi6lVUAGi2twwLnXwSbRY+WHhcALNylmI\n1YJp4RrpUD71dadn/XWKblngcIjx+MMgKDlcWSfGmP8RTal7LHL0Sc4BQ2kS\n2GKQqlLoz0I9xznFBk6tfekXN3FmHNBp9Bc8RsBAb8RSyGmPaDaVK0gtEZVk\n+fykNvs/b3XwsPUFM5ET7DPvPoQ6bnhupBLi3Ml5QktGtsZK+SolLUIhNaKh\nA4EAPOML/JZ5pTjkiRwabuTCBBR19hQNMnGHLLgCFb0hktlIWoR6ieWUL6l3\nOTsbk7Fp1sPhAY5VTnPc1ToJi7vktuAJFo+avedgO1n97/uYtthA2zUF5W2i\no7ylS3d/Lq8SIL1qTdQvxzJGC40tBTY84RImzEXiN6gQ4ekqp4LrNlIQYG5E\nLTLYZ9+2EuGnRQZsoS/KztLuNUZymebBuHM8RZCNFVQ/r/6of4W6aIp6mBew\n/XDf+0MN3acePDJg6kkb5zOe+kFd5Ij/2T/sse/A362ZZ+YVpcI6bBjOlAEo\nHvSM\r\n=CL9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS0PaURL7bsTf6Nl2A+UfyaeC48SvRcO+kXx5N5PaZ/AIgWzcKnWQLaZM+d5nL/p6ieTFCUiadbyKHV5YRX9qo6T0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.8_1561022063471_0.13113106781799067"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-next.14":{"name":"@wework/react-floormap","version":"1.1.4-next.14","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-next.14+f8c04aa","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","husky":">=1","lint-staged":">=8","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"husky":{"hooks":{"pre-commit":["lint-staged"]}},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}":["prettier-eslint --write","git add"]},"gitHead":"f8c04aa5b465b0eb27732f4a44e4717af20ad9b4","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-next.14","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-bLt3ma3YqZouOM0ahzyzDb+eRqSRmfo7oyYqzxZYY4hYSXnNC7r/LiDJMePqnbfsdXssGZkbv8+77Rwp8mEBPA==","shasum":"20020032992968ab95b4816edf7b9c3d04a42cec","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-next.14.tgz","fileCount":17,"unpackedSize":59078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdDD5iCRA9TVsSAnZWagAAxN0P/jgtSzykZQYDkwYWJEyR\nqIKr+gKNwHYfOhFJHkXGg7FYWaaK/DEm6dhwhD8ZdUI30drpvzI/q8rd3e09\nRedRld9ud94IwxbShaPkKH8WLblzwq/azugTmskYpR0W56WrRQm3AIhru4V/\nDhtfEULzOOxRaGDvErJMrd73IDfnySKfWox6hCNs0HUvsaRSYZehg6flM76T\n9iA2scbMHB6yXdvLoreUvVrkab91cGftnpwXUi0hpIBgFMhSvmXWq/sK3AHK\ny5ku+Ey3Tj1HoX5C8IUCYvU5aMcosQfbRDHOr2oNVal4HCqenYCVk62E4GJZ\nFBeZNTnvbD0nuV/UIkUB9I0PRIz5W8jzpMX+aJ00rJX6Xl9U6Y8yo7a5PWnn\n+JKjGN1mcByvdJRr4xeyU00KSiR6v3zfKps75py9juu6fvFKloQqUA5ln7KL\n8n+8zbj9Ef3a5KKLNG2kHfxW4Ha9hgcJq/MkLTi9ZZGHPiNKnkA47bTe24DM\nujb8y0kls4fmtjxw7RrmfY4LUGv6MdlnULmZ++XIKGWXazVwOWOY77s7YNa5\nhh29qqraQMVnsZGSsevMoFEhVGs5wceeDj3bCW3dXRqdiwbE1SEIzFAI2PEq\nt7TiWRDI+5rj0bwcqgAPY21Xj88hLp057pzx+6buiq+F9KZt9jiWW79GbMOr\n04E2\r\n=ZrfA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICr25u8ZDtQ0gSN7TytSuBxGMPzcheQ0jfzqS5UFOcUXAiEAwPK1jSpnK5bqrhGwG/1FIwCGy6+um5CTpWX4+jctXhU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-next.14_1561083489676_0.6530094570900948"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.9":{"name":"@wework/react-floormap","version":"1.1.4-rc.9","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.9+d0dff89","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"d0dff891466660225e89226f1de192d90f88f96f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.9","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-xNcbhol7OuWFA86hjU9U4fq2EeRdoo+JCsd2n/uLBgtMEZfVSMv3eNfFipa13Q2Eh6VqIQFDLG/wno2sNVQA2g==","shasum":"ab1ebf7fe663fb0da0416c40144c64ffbf591176","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.9.tgz","fileCount":17,"unpackedSize":58805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdDFoaCRA9TVsSAnZWagAAv6AP/jdlAnzLp+SlKpv7xUPG\n9zq18uiZQ6P3rILJ3zB7AMUuu894NGFbZUSH0Eu4tRerpt681vufnSkYUNtG\nHSFVQ+w6FYQ/N9h6hi48gBqMbWvlSRG0L3o0LTOmneJNF+wjeGnOG2uTcKf6\nOuvpInMTxjmq/nZE775NBKhrExjx8TKjVlrnPSxmfnWWeJzKJw5rALWeXr2y\npSBsMaPde7P1SM6fECy2VZKBkq8G5syESx9A7GrGcmG+NM+q6s3D4ClpSQe6\nZxkxQt3s1fMbVhBno4zsAZsGCCkfNkd96FtB355Pjrh67B2EPChLFVpMahFA\nIxDXaS293qBIKohMZ28lYHxYHVl5+iGeYv0rh5NQzE+0hsAZALkJ2r37sRAD\n/rt/Tzl05ccFTQriNQKDhRBD3fqbmZrUaDqXm3xflhlnoOJXAgOO968lsrth\nN/bhgO9jEKW/RW5JfXtKVJPaddU6FooZ/eVDvU8MrhNqKm+Z7nMWFWk5QcDo\nvLbUmsAYUHH/QyYsTV7OGVR36sVxclEGNHYSz5qs8RyjtknJ6r1uTegHiN1k\nVEdKSQtBsqmUSVqy/FlC4l5gU8WZ7RS4Q12+IzlkFhlGMQLyS3ZX26gHmHJI\nr9XtmB4VWfUeAtG9CkNyDMx1zI3tBxq+mHEeWHsGXf8kiCvkvjRAWBAklY7R\nwtxl\r\n=0HvW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5PRBj4MbZHFAv56GRTaNaAvBlQvzn2OK/rabRXIS0jAiEA+HUgp4cjGPg/ee9sZHnMRr86u6b9BbFrxLkQ3WTq5cc="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.9_1561090585460_0.07808741412612008"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.10":{"name":"@wework/react-floormap","version":"1.1.4-rc.10","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.10+0fa3cfa","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"0fa3cfa575ed003963d771e4b4a22aaa6737ea64","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.10","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-G0eggJFNY1W7NQon+GQdfzhSGV3+7TPzTUJWA/nVxCea5Ux4DibC7VaFCrC0xCdkA4Z9hgmD1PjbrCFy21wELg==","shasum":"5b0fb41483e68022e0aa468dc053a687edf708a1","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.10.tgz","fileCount":17,"unpackedSize":58807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdDH/ACRA9TVsSAnZWagAAjp8P/2SUm2UsZXHlMc9OB/1r\nWMC/YVupMzyjQnljSpVKSpN31w0jlqC6kxUaZxShyYfcq0HhyMH4ZlNm0WMi\nigSeXGZfkRHxAFY7n7zQwF1DNhsXk/vPRaYmqLCrwciXQfGIqBC4qzEjGBC4\nIpXTdEPO+lp7r7nacJ7uy+wZ7itGhutLPMmbuGU0zyvU2XQ6gOyKbXoBBq9u\nQVi3UKft1goY/7fI08xttz2Z28oNTUNzMLgFBUhLnVm/zpP0tAkw2dzAltja\n50JMk7MIXvamKaUqC8MltDlinwR/kkpXYwYzYLnuGGk4Zry0t7SSlGln8wlA\nTvW8mTrIGBs/+DK+vyQOFwPR3Ye7dhI8NIzrsqaYdHBVSiWghX4KHSUIVHud\nSScXhRvF75R+CJJi5dipS53I5wrsz60XmUw5P/Z8XkZDvcMJpMRO/xZorqgQ\ngHLOcuCl7yyApgZBu0pekxarlbDeAk2BArAml7Mu2X7rz9FDRuzTJ8dv5uKo\nju70u4uSP0vfzAxo/DQp0b1xvWHYNahG1oq3xZiaWl8cusS3Ub1yn3YaKyE/\nQf+ghPUSx8yTE2u0/AU4YqXdoAUpoGDHbnnQb02CxsWNw1VVcG72oUXUljgC\nWMDDBNj/yPaKGLdztRIFjV5p/LaK/Aa7llaiyKSqX8Z1iiaPclAjI4arNsVr\nh3xo\r\n=FRT3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7VNk/SQ1Z0dqRQzhYjM9jQwVSrWWWz6JpkEb+pUsKXwIgOs/TZKEyQnA++p405WvKcHRNC0vIo/gXomIWFsbC5jU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.10_1561100224108_0.2612758928070056"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.13":{"name":"@wework/react-floormap","version":"1.1.4-rc.13","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.13+a950a9e","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"a950a9e2f83d8e42405506dffa5ec4cc83eaa2b6","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.13","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-PvZ4nAmVZzpzn9UdSPyqsy7F6dPD3jlaEhj8q7jDAwSHJrvhJIeM7z+gdZOLQZc9E07ZJlApl+L0EgPiGVfdQQ==","shasum":"f0dc57536c2d14811e7d381789196068b102505d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.13.tgz","fileCount":3,"unpackedSize":11292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdDJBHCRA9TVsSAnZWagAAIiYP/jlexOlzHDDaQuu4iR61\nVkV/v/d/lBH1bQmPbgzR2XQWEoTxDOIiHIpV5UGlbyvCY6kkVchB6zSDgfb4\nn/iNI/DJBE6B33+lRW+FTCekfg/QNJJyKggNFpaJnPOg0ctGqqJwstWYFBxT\nV54utTmFniDSKGVh5TWvif/IpW80285r6Thq1RbnGGOcEU4Zo52h0UNdVs/b\n5gJHl+2+zyxqPIrBG78vcw0XQJS1fRci1h9rvWHd3cJ/plQyRUGHHVmll1Hr\nSB0hkza+d2XxTvgKiHfIagVg8TCtu3AAzWyeo8xb6BNBN1KmC/s0mvyQ1JGS\nnfxef2JBGu9KVn3DZ+MAweVJKLg/fhkIq2HtvcxdjFslUq0vrJp/rY3dFHP9\nKsCLVVbzPMPjshi+mZzcB4IV8yNuAZQuqYBlxDxG99+SocsLoB8sUkJxWTTU\nZEDMqwpbmtpDZ90pLWhZI0kIu8XjD5gSjG+QGtwhpxgovx2nl+JygoJydxkg\nS5OJpt0ziML0VGhItXlFikUty8i1JRhnQMf1q5ux4pyzTVVz8bBWkFIzGqdd\n4PPtRPeDnL6qaDeWVkw5YPBrFjeSFpsVfAr17FU7L3p9nUY6bTcPxRgGTA0r\n0wUG94JwgxbwtFkhlIcCuBYmzspXW6J3PcBG7eoIB1Q9yElMMGau4/TBi1Ck\nlMIH\r\n=jd8e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSZi5mIb0eTltJgR5VBznda73bhm9jFAi1xty8vVTgAgIhAOCVL/kjGi64jAuctEmuNxkZnZc2rOUKVQtrHBbcxrGF"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.13_1561104454803_0.16563431842516096"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.6":{"name":"@wework/react-floormap","version":"1.1.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0","styled-components":">= 3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.7","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"06ffc6a1309691dfdff0219db6f2d19017500ffb","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-5PBhV3SU+dcWNZEoVqdYMgFlx2R8wdR2qdQCQ646P5SuAI9+LYFsxIZ/U9kMIeHSJeH28K2aHiJtoU2Hb4ZyVw==","shasum":"4f247a5037d3c157cfad4463a001daff0f1bcf30","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.6.tgz","fileCount":17,"unpackedSize":59417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEFX/CRA9TVsSAnZWagAAJ0IP/ic2VPUhmwISejUYucYY\nzmYyuRMEH241WnGIpX/koXQ1c6Hp4LToRPMCjRG+dS5YlRnq/42lSpCTUpQF\neBdUQvgTwXSy22ZPVIYQ4VcMthOjyXIW4YlLA2DjanSwiRSqBUcuqOcIdkDs\nuY3dhX02e49+Tl8yBm16/fAhcPEVWeDK+tisgxNwIXQwGiAbk+wPGxAy/7TY\n1IKRHKtPn3bWlYKHOtfD92HZzequLH8HZr0JcB4fFVZoaNR2K5iWjnpp22vq\n8WIa5KinuY7HLYRIdK76hFjTZyH37LG7MLis66zwrQ96MXFUudgr23aYGzno\nefin06TD64T/H/Ug1b+wOVCX1stfHaI2O1MgBTgfUa0UaPJy0l5gcsWx7/aY\ncNOkLnIUeG3Qh1fup8Wzz2zoXsHOKP5kT/nZbtD6pEm+JiEhcqJsytO8ElsE\nFVQo8VqDnVKV6SIczDDl6AoGtlOzg2g6RmtCX83VbTdi5y22ReWbYRwsyfMA\nw2pe6e48MHapfJlajO1aId4moPWsANBsp665prY+sQCT+h+A8lOV3J15zRP1\nGy61W9wpFHkRoj0WD6IKT5jCzW0hcaJWA8lUJBgoui1xRCKGyY6ArykhcKkr\nLx+DntD0yiW6vqvLhGjdNYxr6Z2UgeKYAsITtYY1PMlFlcItuk3QBJjCGIex\niCt6\r\n=oi/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsIxphRmUAz70O0tJ6b1YqK5cWBxl9ahbOR5RIzKaUCAiBqRrCcrRG3FMj9IXbH33Dgy/diDlJrIZS7mZc2EuvFmQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.6_1561351678193_0.05968276219575119"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.20":{"name":"@wework/react-floormap","version":"1.1.4-rc.20","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.6","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"003014f30f121bec14885e076236729c1e38050e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.20","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-nDFEykQf0l6K1hdX1VayAQ5yBooVCnk3D9YYaqVHzjFvJaj0LglNfdES8BdPkmF1nF/SmFjZXIoUVGwCTtO7FA==","shasum":"1548c4936b7b4eeaa9e284aa8afdbf0bbc59bd16","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.20.tgz","fileCount":17,"unpackedSize":58760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFEL6CRA9TVsSAnZWagAAl2QQAI7j+n+X67xxvT+r9v1x\n53GBJZLkFQfqrS4YQh1fVfk4zTGytg78X+ReLCGu9Ednqr4kIM+nEnstEf/M\nnSeosL2U5arKxwoDl9qUcvBnkTwBtBaKGOx/aO9/PVKkiNwvuVLs6nsxt5o7\ntnlZh5UmEon8QY3CRFWW+In+JvkKsUyLJhg9Vko8k3c3uvPDSEsH7LvgYUMu\neqG9sAnmzSYsbzbmpIHNzpZ2LtrYkF9WDcUbID7WQ3qSAzNJcZiYBo1tXApR\nzqaIyWQPiYjC5MkKyWkwdcPKfdt1AzU5enkU+wk70dc+FMP5XsYFAEG8FGtj\nbn/nRkbs+nz2pUlSdbyfSfk1vNQ9Gre4JpTdaIbUxaAvl8FJg7RLc0VXTV7U\nabTqnHAsH8nrslcsAC3Ufi7evBYbzny7fT6l4whhBf/viVBbKL4lhThFsjIM\nxHDwNbZbINBbYvXg3f5DCWSiCfHzmynREEJlRPOmDsb7R0Y3oHtymuMX8W3h\nDJPI4RcHma8yLKVogQ1nqZ8jqj0IpY2VzrsrVMIEnJ/hBn1JPdHkrgyVNrhW\nZsBQJMGRzVSJA2Nik4W+jj1knSruGTWwoSU1+f4VjqtdB0qofnALXky1IQA0\n8z+v7VFc+H6xduM48RtoNGjCHBHiLZjCllYm2or3AWW5UHBiKXHNF9X2E2wu\nqJCS\r\n=DZYY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9B1utQ/2WFdK8PdNaRE7zfBdaPv1Q3gvRC9Zdt4UCEAiARR2ICHbyzMRGOisAZVKzZeuLF7ebiomgrYPefYzrEcQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.20_1561608953599_0.40008618812807906"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.4-rc.22":{"name":"@wework/react-floormap","version":"1.1.4-rc.22","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.5-rc.22+691ef75","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"691ef75915bdcd363188e889c2efd818afce5d98","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.4-rc.22","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-RocrX7qijeG4mwiiSV/8/nrzBOevHQrbIILGg9Z0VD+tr17Ev57HehY54J64kktkrUzk5FKTYSQIu4d+Anamng==","shasum":"31be165e18cfa844d3e3a77214106b93b7ba4ebf","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.4-rc.22.tgz","fileCount":17,"unpackedSize":59412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFEo+CRA9TVsSAnZWagAAYbsP/3/r/4mjSZt23CvKJZIn\nDZlBWaXfQE78WSqbt9O8FCnrhMlRN0aph4rFvf8s46upILpW1hsLy6Na0MHy\niXaJOLvP4deY6Wwo5bMVISbEYCjYV8zLozADPDUa9deFPUmSUUo8nRvf3h1a\nNcArdmMRvqGjIdvoUJgndPzTNnX9g8Yrc29GqkI8cvDKTOiVcqmIxY9ffTYY\nenXr1meJDqhbPAZrvRWr187XJgBcajczqBOb94a3I4aFiTwidLvYZo+j9ska\nqE95gPUrH3PssNfPQwU1o++sfyjzhEzdJ4ASCaolagS5ewceSbjZMkApx01p\nA8P0kj4UhpUTYDB45uieTLcS2YXerUnAp3bDsspucPEsvVKwtlz5KwrlN3Ti\n5zEY0qGNs3kYhbL8iOAHInT/w9vku/ZBaSyiZPhnBnaBuzV2y5NTcro8BTxo\naSqwFSH99vgLoEzFJ4EQnJs0B1ZaWsETjlkhHnBXepTjFa7tO2P0EgCMr7R9\nnuJGcPiZLlNgMM9p251yEUGpkf4f9wAcPTGibC9fdmUARScnhBkM7DE+W5ge\n9HY20TJDz+KqVq4S0+WLj89vqiYK1XWaFD58jKYKYfMXP+ZhG+cV728Vj7nV\ne100KvRigItGr4+3RtVzdqMZeksix8v4coSxSRmWQE3qnKG9XtWKL6tYVJT9\nl4yB\r\n=nuGX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKwVSfb0DOb2m52a1a43ehfJl/F81+vpfpmV2xM8hBSwIhAL3jve471GmYb1vTjnWFZeUfXzJ8F1G8ZQfA4GPI2jCF"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.4-rc.22_1561610813205_0.693678542946575"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.7":{"name":"@wework/react-floormap","version":"1.1.7","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.7","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"255850eecbd7841bc65ba873021db636be1bc37e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.7","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-CB2soj8YmVG8ffZ4+0dZ+bpazLz6v4sKgX5Y1uxHOOW425cqo1eHjqrpYqYEzLhYDXvH0dGkt8gj0UCkC9iCxw==","shasum":"24048849809f56c465dc0637519db451382ec538","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.7.tgz","fileCount":17,"unpackedSize":60482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFFG3CRA9TVsSAnZWagAArhIP/jjz0KZb2zGdzvhiRfOc\n4HFfnUMCZkqWNGHkDUa7SmfUnn6viaaXq90kABhjiRNBgY5ngdSnMuqjaic2\nhYuiYAw1iaq62GxoTvthkVOH0IKN1FqxcV7GcftYW+3l6/guXEhibBfjZpUy\nSTFw4P29hAkHK8q8HPlt8Mn+pNdqMnKNn5DQ3/qIM0i67dOoMzArfMSMQznS\nMjkpVo2VkI2QxCWCZOOVd4MMic9x5iGvtiGHli04FNmt3D73tw0X4MCuWmT1\nnAfF8MeT7J6o8vEUP0gMYPexmj4MWwPC+VtYLDC83f/JsDhfo+QKSatiQgHy\nGJqgSX9EnZjxpLbxAtI6Pc6zrR/YfetswHI6jWz/a//P5795HPhyfa+iC4va\nMF8oG+jqf4XKJx1TKO/XoAU3eTLKUQ5KLoAzAWXGMvfM+F/h9Dsg86eFhsq4\nNINROqhWsvjG1/mRxDV9MzeIA8vnxf9w6yFL2+zYzqWuF5RnsT7lojio8NgG\nrR1Qi7eRSgmwNWtL3BwlU3PY4aH+U6JNA0z4wqh/WIuLs2f+T3mShD1TqKxY\nVir1CtQYOxA9pNj0tu/TpcHjAEnm6rgu3edAMamDslMOHFIMHqewTl2p8orj\nz6G76hVmHTE+TsdtvmtbYmeFPER2LqeDb3SBC0/0ZYGas0u7Qu71TW+RgigT\nQ0V/\r\n=w2TO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYtdUoK/RU/sTM7mi/ODK9qTifMiX6Rou6NjR9bDZ24AiAFk/xvdbcg04qhf/y7IiJMsyKIajdohW4VON5Q60xJTA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.7_1561612726500_0.26141005059254296"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.8-rc.5":{"name":"@wework/react-floormap","version":"1.1.8-rc.5","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.8-rc.7+8b203f4","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"8b203f47420f6093661fd2e5b33db93a4e799250","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.8-rc.5","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ErKpRpEVwM7lSaQiFwQitpkurk4+dZem8wIlyxnIaci8SLW8kdk7p2zLZfynmp2C1mIq3yhJPEyUyVVT1Zx6xg==","shasum":"6b73ee4e7233e39cec06f64747cc6c6f35302700","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.8-rc.5.tgz","fileCount":17,"unpackedSize":60508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJrXhCRA9TVsSAnZWagAA8boP/RCl4M73sdP+1+KWuG9V\nd9kRZ4Z5My4Zuas2YYOJi2kGvl/zT2L9HfY9AvFiTWM78eAKn1/yGrmavThx\n6dgyzjZMjOYvVOfujgLpL+7lFLz+Lmk8gw+I+lo0utbiyXDlK5HocFcStCPI\nq83hOfPt5GOJu8HIYJvl0gvYoGcBflU9WPydrMDLSPV99rv/uS1N4E5+E8rq\nNRKIKQ2ohFQCwfaUswM7pwIbZ/5XgqP282rBhoOA/snN5gb/qpRTkPlW/YHQ\nN8AlNP1NVViqXFq+HXzACzMi1w6BT1JH1aIcNH82Y2/ASt8dA9Fpgy7uNKb7\nsGC0t+x5qiXIPrQDThp6QIrTkvyvn0GgkrmHOLCAlXFOopqzB0BfF1Fl87Ux\nIL13ZYCJRrL0TcgaPd9rZWGiEZ+ITQLxkzML+wfc7dlvl3RE8o44mkf1GjKf\n2H5ajHR9QI85MtBKE+3thShHlqnvP6HzJZrBwYJf5kV9t/27p/DQj+rwZWac\nPcptGD54px5VZt8BITU6oFE6ULb03UX04TUdAEDEiKtECTac4vSYwVD0KkuD\n/Nap6pfNOcu0Bj2L7epQdFf2QhfZYV1B1IdCQrYfD6LM/zTMWajuiTQkPstC\njeoDpyHzxO+oTHTSQHE39738zoVuW5t6o17+GTc+clFoerU4DR1EHfFTEFUe\n7wQP\r\n=NYBS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaHtSNHelu5T4qLxLRg8tkgzDAlx3S+s5nIQJGLYF1cwIgM5hogodYJvO9jlMfg+GiB33FKBrTJF2Vr4LAanDzdjw="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.8-rc.5_1562818016404_0.30574513679075466"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.8-rc.6":{"name":"@wework/react-floormap","version":"1.1.8-rc.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":">= 16.6.0","react-dom":">= 16.6.0"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.8-rc.8+96a390b","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.11","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"16.6.3","react-dom":"16.6.3","rimraf":"^2.6.3"},"gitHead":"96a390b90e88a014dfbea1871ef9ec4c5d05dede","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.8-rc.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-HhUCJj35aIvrnk4mG7jcWIWxnyS3zBoUWxGyIkY380zAuL8aSRo7LFPT/1tdlW1hNjRxw3U2ilCoMSR4k1i1Kg==","shasum":"8c282819e08a29e5cd67ba628ff7abb797372e7d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.8-rc.6.tgz","fileCount":17,"unpackedSize":60508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJsRzCRA9TVsSAnZWagAAil4P/A6M68LJUw8E0lGg+7Nn\np+9BPuCzFLkxwKJ6/+2HnUV7s/P6rBzqlm1TYSGYpnP62NmS1Jc/A9LBAGAf\nG94eBmD6F9E560T3/I8mc/8lylN64Rq6g8z9rjfdqWf3XeaEkbEhrtwXRCPC\n4WIz9vyK04VrE1Z6K1GmIGnXpLPCuJyRZwL7gxx/EAP5dwzo8FG1U0uqV7oe\niwDq2R+DEogq/ithrAV5x8JSq70OedBzeIGRoeIRvf4pwOKIuTkGjpBI0jy1\nwhuZA7QX+BtWpw9RZEv1+mMyp//2cs5ndMPBlrNjlB34D1F3x8U4BR00BACy\nUxXYQtxbbwrgb97LD1bj8XRhMVdHuYbWgitrnG+Nr34NAjYcJJ8V8b16RYZ3\nY5v9xeEe1Xw+BErw3u7QT5zoK7Lpj4hjaxcMq15gbsrt843RdFgq1TUciNwg\nzBgWtSyVEt1RC7ecnloYdhiY0sCPugv3H1T6kolgD3O+MnSTrwbN5XFXXuPZ\nE6WskEFiXXtOe9pHJlRgSF0uETLJzRDhuX2Epdesbxg24tyB905/5xUQBVb8\nQhz3hc+VWQDVMTAL7LsNTG9AkIlK/6vjUi921DvQyjmJVj7E8jeTUeHmK5hQ\nruLFASpWvc/SQJuF9MiTSEh7mKtemuMlveKvhjNVngT/dnfYzkm7lrSBQoHO\nZha1\r\n=CgBU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFc2dadgo42FL4T9OFFx0m+SJHAGYVW8Wp3wSPskFZjAiBZ4OQoG2jyMuitlVdr/qi5QMBbTd3e36NPXj3N8bGfuw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.8-rc.6_1562821746432_0.028145145156837525"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.8-rc.7":{"name":"@wework/react-floormap","version":"1.1.8-rc.7","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.8-rc.9+67d6ea7","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"67d6ea7d0407252e7efe919fd399c5746a2944c6","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.8-rc.7","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-xT6TyNXxp3dBf8dIrLiK1Hxn1XeIt/LjBGUFT7R6f5QmrjXvCzkwbE4F9hiW7wta5gyMNoHr2OlXscUD8oKaMQ==","shasum":"cf7890d47ffdd292f81a2616d1e7ca8b481fe85c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.8-rc.7.tgz","fileCount":17,"unpackedSize":60506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJvTUCRA9TVsSAnZWagAArOEP/3+5AxMl1alypZAcTS3e\naPAIzqIs7PsZJRxQ95SEIDxjUfhqSfkMKhcFR9r/kgmBP7GnuEkH/KSrOUrV\n0IPYl4+8cQOciUy166eBtKWIEB/Cd6eU9eYdddQyNTvRFTt7yN3+NIrLT8fs\n9qTJaAhP2BznctyMqFH+V0sL/IcoehMi73TIQJIWK3agvXJ4T31Ltr6j3gvn\nsvpk50ShTRIBI+bGm3HaxC/5tTkk3rl71AvqQDKlBd6AthIfRzjz4E+DflN8\nXYRflA+nyCV36rhmBZNdYpIkUH0U4PHm2Z3cSpkOXhziDw4VSgzEhkvP7Bg+\nOVp9yG7Crla1dOJ39ChhO9a9jE0kV6181WK2WKOKPi4BMsAlMzaPktNHRflC\nHuN70bpcNbEAEBoS7yFOHOPcqLUDHqRoMJDAvaQzEbIJE5PyTRQ7AzxkEcHM\nj3X8CNMVLOcDwGWcQBFlE761vUqnMAdHy1fDVvEDqvGy2gR+8DKsJXW64lPx\n+4yF72MSLaYEcJr4GAHmJeIUrqtyuFr1rGlT6M13NjfrOARDzhMdYpsKH97E\nJKZojh9uFC8BQeqX1AIVKCkLDcn4ikq7dfUBzVRR5BHgTX5ZDPsspK3uBNrO\nHRdMQv/rLHSf1ebl3p6c+YBUWhT70QrMY73NeVpn+YMBaznDRaB11D3P4JxK\nViTj\r\n=5+JD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo6LudK3hE6cUDQnjhILJS1eCQdxWHmn9VbFy5ymZuuwIgNaEYs6KXlyO1N2v/ZLyAezomI5XCOgwo3g/SRP/PsBo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.8-rc.7_1562834131610_0.6925976896601724"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.8":{"name":"@wework/react-floormap","version":"1.1.8","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.8","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"c04431577f231c12b83ec78b97f7742f78820ac8","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-nEv4B/rdUL5FBaEIHpLpk/BdRX8RX0hrboi9Ilv190l/mp0rV8bcqNnvgRAIhWz3k2bAu7dZMD9tAGXdCrltXA==","shasum":"eb2cbab3a9324c14b95480a78ea0ebabb0fd7dce","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.8.tgz","fileCount":17,"unpackedSize":60839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKZB0CRA9TVsSAnZWagAAvJkP/REnr26g+RHupfePRi3P\nptYoD7ZkibHmZqT5MxhAMoSw/7OAvLy97wdZWlscgwL/dGIFX5SAdAYqC0+m\nKn82aUslZ77pd2asrlIcEDjoVIl8LjijvT0ipoDgPhYrPtiGPY/lCQntsKRk\nFe9pFkLc1GQKWe7kOH4HsSwrex42mabuLgs11ZFWe0/F8CUfXynVCQxHc7To\nBhF/9UP6uhUcKveCn9cCT1j3WPJkN148pQ3WpjFMdzEPs9olQqHypd66t5rF\ngRlL0y4HcUtfGFolL6OqLE1k7tsFVsErIFPe63/UHjHnaNTT1/9dee7XiMac\nzi9br5CASSwINQs+of4Qotj05Qtvlw9gg5e+w0Jyzrv4HHhgeyj1ImtNyJM2\nHKf6HDl1OzgfQvM9lxKGO46HtC1EsRB55QQo3dvUUt+YM1RWF64ZbV6c3el4\nFYVMhxlT/pWuA9RzQX7A3unypjookLHYWSUX+vd+hBqgT22/8MHakqZ0P4pu\n4/DncqWT2l8fbLx5ZSnjktwTzaip5oKW8z/h+JcWxLEjpnbu/dSKJUeQMd4U\nmZfaVhhOw5uAtqJr4HDhRHzpsNlKNeHQUUIU3GwAiCmP37yAWThfzTGJ/4gi\nEIYyzbweMbpdilr91SOG1sVwNDM8hEcGAxcKAXsEaqh8pI3q+jwZddeEgTUG\n0ScH\r\n=7LFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeniBtUMA3ZF61BcXd2BejBOIRA95mpxr/z7rGDCvRewIhAKSWRZu3pJoo1lVMxPBMYaBDp0hrBq6YpX9yykcvldsb"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.8_1563005043701_0.03752696771682262"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.8-rc.9":{"name":"@wework/react-floormap","version":"1.1.8-rc.9","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.8-rc.11+e94f30a","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"e94f30af330091f99b36599ae1f65b78e8322473","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.8-rc.9","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-1yizZCphRyXUvNzSs+1MZdXV+8R00ThzdouYLVvPiwnXZrZ74QeGBveZu/mhhb5cT6NGUxQA2s4l6wNZqeCfsw==","shasum":"626f9b3eab31dd9137349f59c471714b3b3f12fb","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.8-rc.9.tgz","fileCount":17,"unpackedSize":60866,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLXOxCRA9TVsSAnZWagAAaHUP/1/HGrUf4mtIM1carhip\nMzZ6ZaKS5bSQZ8tUKpoB2NOtQEYWB/xVf7vOfr/74IBfl/BKFQXY5C3y6dTP\nIfq3ukAwSHDffE75hslJY1kB//QOqshuk1iDDKFFozHR7LvKTiAvWC+MPQla\nisgVS8B1k9PDbIXKENlVRpWyDkaM8liPAuxsBXIxBMrnbtyXvKqYkVG+Hb8i\nkZcPHyyxG3MTvncKog3I3mNO2YlaXNIKno4Na3kJEfhc2NMt0IYgRokoSqq9\nFHOv5LiwZIb45DDlKtEbqYkr1GH3R51LIFKBR3/M48a0r67uoXcO4cmi4MW4\nGzIw8nNBXeYeuXwspDVP4/axXmz/C2GQ7aRpGsxIoinejW1zwwBjGJaBtc2k\nm0SZUKeQBJ+4LSSZs69wreLfJeWunsusJ5A4TpoB/tz2qmsWNGIzywBWS7FM\n7S6IOPfzmtIuCx25a7+as5glle4u+nuiEYM6blDbOlAckYikApL6tNvfiG6D\n8tTri0gPl42WHa9apBJ4SdCe9Vxaw/QWxYSIKavIdXWcE0mT+V09aK/PoieA\nHF2nFE/XVmuRomXuBnOAYF6LPuRgkmZH7AK3l/CQsKcNbNjk2rVIlmoOwqd7\nlQfec2CE03aMiYS72yMRx23goV/sGdb8rbHRvwykSh0WJszC1qXC+vmlYUn5\nWlRc\r\n=fpcU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtmNCw+x90CD0dPZoECqSvc43QkzTrvcXOhgIav4vReAiBPtV8s3Wtks8HUHQ5TIgfdsCQ4VduWe/ufk5a9+8QnBw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.8-rc.9_1563259825110_0.12762720575508846"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.9-rc.2":{"name":"@wework/react-floormap","version":"1.1.9-rc.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9-rc.2+13566b9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"13566b9fc6bdea53d49b9d72ea9c86cbbd9b7c46","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.9-rc.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-WA6mjA7IjkAGOqKL/wKdoqpb8ShlniCKj56oOv/Y6GRGFhs1E6OBPcX3+Sv7teYPtccWUOlt7UkQiUpX7FiwBw==","shasum":"71c745d371298890dc51ef4f1230130c76f996e6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.9-rc.2.tgz","fileCount":17,"unpackedSize":60865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMCsrCRA9TVsSAnZWagAAUNsP/101ezpHwXsWTkzXR8Cc\nBvM4adwKhrSz9UmQrrijI8cgGXRvK/wjByndKQxXvYBp9QhDk2b3jSMe0ljz\nmwlN1RCt/wWIbTJcLhMA8OD24YehZuUGM4Gu5eo6ujGELRYh/bz3970xbS7j\nqbvUD1a0DenxChHTWR8BGEJzsnEWL9JPuU9kQzLoyC5jIMvVk4ttNHE7oQ6G\n6ODrYLeRcLSbDInMCuYL1JG90z4oecR2PnHfI2TWu+Y+jOWlajWGIfR1aSVM\nMiZGkAc/PS9scEdQ9Cy/WfX+WYn66/Uv/4TVcY8LoLjleRNxjgu+Ie5l9nr8\ntrQ382J/sF7rfQXDMUKyWSyEOJFxol8QtAMcWos9oRUpDS4pF8rpESQlwGUn\nIs8DNLN4v2uxdEZmxCLbZK2kH/3z2g4feV6/I7oEkyehmZMEU70UlJMgiPtX\nWcPvTH6KLDn5k3e5mh5KvBTaCrRo+RdCtavltwGvUVuLRmF5xi566hsJ4xzQ\nBj2FnrCpj97anB3GDFYQNUZpx2yeBhF3tIeQLdB7GrBZShyznD4zbS56ISBM\nPX8wNJM2ZpWxFA4YUm0ZNhio1AAhN+UOKnhnvIDIKm4epDI3hfU7BM3fwWRB\n8Vrq2/W1Hh3uD0K5ZahQSs4MoO3POTiPYODtHei798ybDWfE1/lYWmNVejA4\n3YU2\r\n=6JHb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7qPSzfI2Opq8HvNYjmFjzQOBkrZUdbtYO0ED+z3LPGAiAFFa/cnVyCF668beMZACEi5GlclzjUYXdhftO+ZuVzAA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.9-rc.2_1563437866393_0.8686156413048169"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.9":{"name":"@wework/react-floormap","version":"1.1.9","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"70a861720c5435dcc9ce06f7e918170c0edb315f","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.9","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-MI5Kn92B5uHLkxC9M6+3rhF3gi20h9GVbHUyCIKIChQOQCa2ykDskjIkOJgpqGIpQ7psIdEHG9Wb8Na11dcScw==","shasum":"2f576393e902970d3770b97ce4019b73f639789e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.9.tgz","fileCount":17,"unpackedSize":61048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMDGACRA9TVsSAnZWagAADmAP/2QOm+a+4r1TOXkk+XXQ\nGugF6JMWMyzKp+JJNLEw+QlIZ6alzsaMD7rXBjQVZ8fMz1ctWLGDczJy2wwr\nk+1kmoDflHtfSCoBoEGy2qY0lN9lVK5G3o92ZBYGUsmnZf5Ef9ecMUSnFRo/\nJJG19nbCsL4gDTdjJ5RRiYAdI0UwtGlM0bciDiQLGld3/MhZI6KZxAeYDxwp\nc7hctICkUGNBHx2/FPsZYT5ppvGy4pGzNZgMdEwGJ0WWJlogGlhJ2ZDoiKMv\n0DysFmgEOzTDlrdHLnZeei3H54N5QLwObZWWUSGVQ2wBjUmio9hsarRs1/ZT\nJ4yFM/YBtO5GCCjIo3DG1ef6ef4cLYszZ1hIrkUkZnxzcjgDx8YSWo8dOE6L\nCOSxZ6jMluoYzqwKr4lLpBdX4Bs9B9/HrmYmFs/eHkss3tfYexsMkkXOJq71\nN0E/RAIOVoIHvcjnE1ia78YBodGz6ESJy5nuh4EvYN+6UFJAEdFfcsNzOm93\nYlDmlFGenfx9QI5K9ldajHLro9jS80yDUSRJt3Zb/tsDPKE8tOH2l97Jb02R\nZk3Kk9rHILXINkRNh7GiTIeKI5abq3UFONJsouKIxaZZ9rpVEMyU7UVoLdTM\ne9N+xUl0+eWewsjEk6Li2hg/wZJwkxBou7YDVIOHB1cLwvDRTMeU0s4sMklK\noPq+\r\n=Aggr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSQw0q0FO2CUuV5bOa54l4nVN301NpTdRKYNMOLJfSLAiA7lNufPGBnvUtN9dKTVksrnWy7ENPC2w6U0PdzHkawyg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.9_1563439487667_0.061635025946240596"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.10-rc.1":{"name":"@wework/react-floormap","version":"1.1.10-rc.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"075d73782c92ec82a72c3c45bc5cd01b66926e74","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.10-rc.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-xWteda951OjA1PGw/ANgPmayNZA6AmDZwiQhmm2JbESdQ/H7ffiPjV3Cg6kHO9vTy/kx9xClzUqLa4WKKdlaHg==","shasum":"c28e9d5f067d6d17dccfe309d6d01543ad913731","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.10-rc.1.tgz","fileCount":17,"unpackedSize":61432,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdP8bZCRA9TVsSAnZWagAABH8P/0tijXFSq3SiKCJssFzW\nxmfFsEkTSJ1f3wWePhwRLydaf8OTtiFce/Mha4uGNB6hDgrZGijt6S3atk9A\nhFYRtrHnByebw3QcwK0M8iqr1DhHurHb4KABJsJroXk5OKEKtzPLjhR5mbSQ\nhgGIKGTbLs5CI8QMFpOsQPDrkT4pwbpHvMpAHg/nN0SRlGnI5/KAz46UEp4w\nB9Yih1Gwwt23RCGXDQh2POBrmhHfy8a0wQ3s+NlO95g1hq54w6uCh4rEyFKl\nTMQSDaHTty2nzG9+4LHv9waPviUbLjc4ipIEdORqWscs672AFdpQDWPhKc8X\nfZaHkBSbYnvEADer4tF+KlxYAWKxp1E3++K+xpQd5/uwwovgzrtXkC7mPNk+\ngYlfXUfbhYLYyq7dJnQi6O71GyKSPypsoGkt/4L+macfWFj7amSvE12D2OGg\nvCBWEAY/gLRNS+Qu+NM3HEeGb/TWsMdcvceYmMkgRLlRc6WjV6kheKbax0Xp\nUd55fJ1MYU9UYvNODukj7j7Tn3S7/5po0Nb7ihyFf7KjPTnj8GQZACfwkYeY\nszsQZl0kUG3fCr/05XZyMat0M+sTV76ArsUXkAfZIQiF+gmYwpBdKNGYrLCo\nai2w0HE6yP2FtHbjkQYJw8AfDH+td/cBtoqvUlW2749zvdM7NAxsUeU1DeyO\nO9MP\r\n=D5o0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8+bHcPjvu6Wp0b9PFUFCDIGRdNs40bLiGEhCK2cp2JAIhALFHV8dulH9rDxIEwLeYt0OJaMZU/OaIG0C7SzsOU9iR"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.10-rc.1_1564460760582_0.9522618229559912"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.10":{"name":"@wework/react-floormap","version":"1.1.10","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"52ce9a7959dfb8bbe4066216c6b52a849559365b","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.10","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-+9FbRkZiGQ1t292bgV/Z+Lsr8AKW+utR3Gt36fF9xxql34NuBNuRon7WhfuKdFv7W1lAkl02lQwLu++Wt5Ct9g==","shasum":"b1fdb9882d0b41c27202170c79a95779741c5d3c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.10.tgz","fileCount":17,"unpackedSize":61770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdP8qCCRA9TVsSAnZWagAAZO0P/RJqYtyPxTQ4Y7XHJgbe\n9UVzD1QgMFt0dGTuRM44Km0bhG642C/9UqwI3QB4Equ/LL1XfWbcVMd94mPx\nT5cgSloRTklYUOjs94dzs1CWrKxKlox///MY/UavcJ1UVHos7igAkJwK2Cug\nbZ8Uj0H72pQIvXso9P9rLFgud2gSJ0WNrskq5Byv1KGy8vV94QyBvGkYBE5x\nl5tVKCfuLBWsnzW9TLUxgBiTSRAXHoZO9DZNb6nboDfcwObYdexXClp0vn2U\nrJI4vm/HT3Ae7awkrJR+lcYTqKGThJnRiAU8DON9sG9cRxiOdflATyMm85gi\nzmr3nnBEJS8wmCcKriaGXkuryzuRv4tdUKNGX1dH44+PWYBCACKLD6sJofWN\nxobq58maQuBj87eTVYQAkBm3a4KJxKGXV9ALY5ycMXKNvi/bse4HYnkeYdHa\nwXEBC8D8+ljQVLYvSwKUclUSwfH/1Y+pg7JHU6F9MopsH+eKUr35bfIkL62C\nckGzI0WdkLmLq1IvkLPs6Mo1F+tL90YNHN0wKvd2u/255MtiEp60ael7dwih\nCdhVMx4I2hjzABQYGy20qtgQn1CDDqvS8AuhrC3R09B0EZMNodGwjHOSJKlM\n4UAPDHuNan2ahXVh7TXwpCGkC2I22afb5jmoZS9Zl7axxSVkLeE4XN5EWYVH\nX9PH\r\n=SIN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFdfDa3Bbpbgy7yBbtWJnXP7zTfwKodtKJgasodr2WzwIgbGI+RwuauouSrZLyxHSKMnmL2HIrHa7tp9xAeMWCkLQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.10_1564461697991_0.04511367461515081"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.10-rc.3":{"name":"@wework/react-floormap","version":"1.1.10-rc.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"82a6d3bc1a63f2e523ed0447050c5a88342b43cd","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#React-FloorMap-Component)\n- [Installation](#Installation)\n- [FloorMap Components](#FloorMap-Components)\n  - [Events](#Events)\n    - [User Event and Data Change](#User-Event-and-Data-Change)\n    - [Mpa and Data Events](#Mpa-and-Data-Events)\n  - [Rotate the map](#Rotate-the-map)\n  - [Desk Layout](#Desk-Layout)\n  - [Styling](#Styling)\n        - [Example](#Example)\n  - [Advance Styling and Configure spaces](#Advance-Styling-and-Configure-spaces)\n        - [example](#example)\n  - [Extension Support](#Extension-Support)\n- [Development](#Development)\n- [Demo](#Demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClick={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClick={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClick` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlighColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlighColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClick={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClick={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.10-rc.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Qxki4fZcIDBjB9k91NudESrHBA0JFArx/L8ANLF9vu3+JZMmk4wVtArKu36yAH/jX6NTCUiz+azie2q7PrswCg==","shasum":"ce806fd920b2a1e535bd7da829ca95c38b1bc756","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.10-rc.3.tgz","fileCount":17,"unpackedSize":61783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdP9xECRA9TVsSAnZWagAApJsP/Ah97SqSFhfnhaJ79ReS\n7dCqTOVaA4NSYtGR0xbjAwErOjWAZnRwEk376DQdTVn/+YjNfl1vd1ppV/2B\nwMqh0hGopvQ9QEzDgF85uJV58tC10ngU9nexvbRpt78JbimQOGiqn5IfVZQO\n3a0g1HsauSCU97ka9B1woV+LS6eV8YsSJNfT+JUL9SamH8ylxzaQUhE+53Zb\nRCNGo44yvr1uJ/YIvLB8oWGZDyyjPyXCxyHsQnmCggOa4jls8QE3egzZti8i\nnS5DltAaapFJUnW7QD9t4clxEy4Gth7UfNeTy3y5/6DpAAvFpqcw1r7UFl/P\ncjVmkcfYpu2hxmFM/aCflG2TJTO+744pALD56TqnuY/UdSyt8K6GRZBVKP51\nsPEHOAjn0q49yvcEFbwzCepTM7IJ+LP1ROH860PhGS2QXdvy7doI5Qm7y70d\neim44y2B9okSZ28t7jL/8h6OeCxhDf1gTMBXGRzjK1+WpJPU12Z2TV3WtUAe\nt1l9IxLKcuilbTtn+5cxPqnUSlUSeOOIxCE4LkEdri9cqTwpu0PtgmLP/9Ej\nhlDb7T12X0/OAqXcOoKF3YTUUWsXPTirpxYNk/CZ4JAWnBKLiDGfaLo9iG4a\n0Cofthn1dkahNbV/YoxcM6O6e5s8zkkE+kbeRDpYcE3k6Bu4NVnbowO+a1u9\ns3fU\r\n=PIzq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBczsL55rHCOiUVDEokPkxJ+WqkvW2KDEfoBHBRm80NDAiAOc/nImwl6/d6p5EAjHyl3NiDnqneGVbV6JSuUt+JwIQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.10-rc.3_1564466243231_0.4703649186781349"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.10-rc.6":{"name":"@wework/react-floormap","version":"1.1.10-rc.6","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"428835f991c2bbd05e113ba2027fb7f36e7d110d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.10-rc.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-HGv8QrE80+SAdpJ22WF9XJu48HcIQkjQzh05NeYof4ZhCd/eAYGTo9OYFTBB13sGS078e6haQqivSmReDa2e6g==","shasum":"c5da0f5f941d3ef5202648d79aa8ce9c7fd8eee6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.10-rc.6.tgz","fileCount":17,"unpackedSize":61822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQtStCRA9TVsSAnZWagAASBYP/1RiIReRUVX4BDMwC6n8\nbw+T4OukRqg4hxaai6r5TR8r5Tn7jYyDBY/uy9Zl63fwwDnkURwL/RLxnPSQ\n01GRx9xDEvYRdmAlmaUWkkjufP/eUPJYaH0sL5XnmWSIy65ocqeEf4efaKaV\nygOEH7/ba/TUU5qHFfSprvLMXpHIRMUatWeuR4tYX4sUnUwE2yF0o9FINJDu\newkxNeXfFqQhsBZYto+nm/e4KVtVDkyW6xUF32568z90VdbEL08GF7vgZZND\nwkwALLb3Ralzt5NypDfu2S36Wmb6oMsBbSVwQ7cRrz3OpTQLAOZRxcy4xkJU\nsFYuuepyk/N7SQqcMlx2gZMsquyWjxZHUJCEgh13TdsJ+EHCvm29INAmDtmu\ntAzMDB7qbU/cnIFx7QFT1HCZyqi8fWaAECX4RiC/gLqQsELjcPS+TQlV4oLf\nKib+W6S6MUVVRVApgLCHE5p0XlqfhzNBpCr0nDMkWruQSx4pl5Qghul+8UYt\n54UuxARPq0NpJ9mLeY+b+VSgt6ZGiZhuyD2vvvfmj9i+mCvWyuvReQqu7j3M\nl3GZME9QQhLMgVSaQAmty5ytQXMTvSPrCB60Zy0tP0B/E1stTMEP2gk4XR9Q\nhM2uXelQ4nmNqbQ7xN4/Ytn0VLva3i7G+OrtYRHVDxYLOScoC0H9IH4ftv7d\nX501\r\n=KxX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCFBaR696L/NqG5eXU9t2/jr8EL8JlHv+jg3ZJZVZdjwIhAKIun7X1QXW9gPjOJXT1KCMC36S4mppz6of+k/aPEWjX"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.10-rc.6_1564660908713_0.5018459239903992"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.11":{"name":"@wework/react-floormap","version":"1.1.11","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"5f028ba96e34d2bebe59eaf464871c2b07f634d2","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.11","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ZT/wtRopeaLBZvsI7OvAAP/twShsmSWOqw42SWt2dJKRICZYGa9WGhQMJWV3j2gwgKMIMognnU4VoDny4Hu6OA==","shasum":"3bec105ef67001b872bf97aac69388da5045cdcd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.11.tgz","fileCount":17,"unpackedSize":62118,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQt1UCRA9TVsSAnZWagAAppUP/2QLnp9KZiPQOJFZx4hh\nO+Uxr6rGSGT0f6np1L5e60IFzUz8+Fdp7CZfahukqMu5pfYC6AoDsoAerkN2\n+KA+WuOqY23QHCRs5HtwqdEuQePG1GtI0MytrIcUV2IKBeaHgXsj45fz3vKG\nU1xvG9Ak+hFasqdTsgJkvc9Yeilag1wr9CM4FbjF3CMD2sodGxxwZZ1QcN8d\nJWU9rLwCJQR4EZRsJgx1c/Ts+Pr3XzwHrg/uvEMWLGpid649dfKwq2diE59m\nvt+i4ed9WnuC6g/x169q+l9hFYZwjag8XSOVn9QgM3mVF7gFDQrTWFpQX8Lg\nAtWeiLMMHXptnShbDsA+sW5zge3ivZXmdK2JavSQSA/0OtjJ/uyj2yh72vB8\nN6vj+WqcSsKgYtxaAngnCIFPZKPTYIYi2IEKH8ofLMS8VggbUzYjujLQuw/q\nMvvEOuWXYYSBkMhGkBnziVF2mfM0nr9icirVHkzhw7YNpYWJ4LI9w9XIEIHW\ns6J67N7YrBipfcJGuA9zqCq+U8eiPUSFjS4QcsbEnsEpt4eSE/lIHFQCbSyH\n2ixr3+xRt+EzXnvtn73cpn56uQDncym0Dh6o7vYRsJLR/qMHyU59beS4Z3Zo\nDk8+EHE6eWGKOJ4Gw5IDeFJ4/HvrrW6tS7mkXe+4QmCOugdFlMhkJlYhz69W\nhtf7\r\n=cKFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWrfOdEcTTKnVRw9RKuZv0AbTPO0Bk3b9dsm42528zRAiEAm4lxwMDEYfuHfg+Qs2/vsA4wybCzxDOsriOFC7O+Vwk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.11_1564663124147_0.8601444160370535"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.12-rc.0":{"name":"@wework/react-floormap","version":"1.1.12-rc.0","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"e4331379b85e761712abc9b454f19b4febb7e5fa","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.12-rc.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-jmJLrrmsf+wWCS+kRpB5oDrQGl+kGT/qHYi7L/QfiNrIdtFZtWpN20luMLL0Lg9qVbbGK8EB+lr6zwSWb1LSsw==","shasum":"eb107fbabf81fedf557dd5411e135feb454491d2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.12-rc.0.tgz","fileCount":17,"unpackedSize":61983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQt8WCRA9TVsSAnZWagAA1IcQAKUZA7jrB3mhvtq9w3kj\ngErf1kLCz1AjWEA6vGqBOK7BSq+TdA99kB2DAPwQsLUUyrFMeQVBx9/iMqqK\nyLMZuqDNrSarP6CqP62buwsq6cw30Trfugl+UGMlnsIbBZGki4NqlpyI42kC\nqYBXOYqDJpU/fhb6iJIKKVYosrCeLLF2b5OOO9MZaoMuomQsC3wx+ZeIDmJm\nC3DXWX7T3R2jsewo0yfEuiSmhrf+vcfr4gLqsvl06AcZPSgJqpQ6P0SffNAc\n9/v54xZsX95PGVbJritqOoTh28RIACAeWo/qSipmVpPZrYD/YkjD8ZpyBMod\nPtium7zxQXckp1sesYX5n3eMsuLMqIcUyNYmDwainfhYHJZgRth/smylGBPF\nPDxUNt1RGxLwFxoYZQVIBVsOS98LaKEuzsiKMesL/htr4z7ngrekKnFkUSY6\n5GEkCxdWQXKGyz0r2F73eHVIxE1K0D54tddIR5gsiQSWe1QXExGv44lOOjOJ\nx6sc63Hzz2UVXnqKf7y+0En/tWKLDPceVT0qiFS7kujJ1Vnbq9k0ljCIgcLm\nfVuxeUWvA/YPo+3wkpiN6jQyYE5jmiR+GoksdJdDb8jcQ5bgUjNaWtrTZB/z\nzfdZAmBDfvXyE+7wmxkpHSwrF3M/P6SmzjO42znTAgIVVWG+sy+XPzKIUg6w\nraoW\r\n=9fxk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE78nIIHDxCesAXX97FJeoTglhGC4TmHRV/tV8W2LYXBAiBujwc/zXp7qw/LwKRPKjLCTthGLGdUXgsuK3Ufh5P+0w=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.12-rc.0_1564663573624_0.0157020150807734"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.12":{"name":"@wework/react-floormap","version":"1.1.12","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.10","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"6a16140f8041e1204f0e8ff904e63351d0a99873","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.12","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Y+Qf/Wsa+AKB8LScVL78dpAExKasV2HQuBGVnXQjV1NChS4Cl42dZIcl1Lu0YsVmSICZ6BRSw59qVpazZ2nAbw==","shasum":"ccb3cf6fb41921905f6ae9eb65cfd6df11331fcb","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.12.tgz","fileCount":17,"unpackedSize":62251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdS/zHCRA9TVsSAnZWagAASLkP+gMYGoxztVbzIIAIsJ/6\nopfCMsjIVxwWy9x9RpQcrFgkDx29U1qJqJJOMwjr5415EfB9dzeQd9YzsBIy\nKkPX+nI6D/xvQeAmCLB6N8coUsjnr6eOxrT+67s7IYWWnvDuYJ4ZfVtdGJtj\nJxOpfvxXQzhM2oPhL9MfYShvNRJZUs6ErYQJFHc+wZw1eCSfR7493e4XwrXs\nqFIRhnPWvLpefNEqX+mgeLCf2BUg8UURf4hoZwQQUpqH6WQgFgDWc1HeKMBh\nHPUQvdBjmCL5NT2qjC2RVjL1Z2zH6paCo67555t1l+tbwx6oPiZrAAlbUfxN\nQZja3MMRrWUqt5sXvVHrPX8fhkJyg4h41+YXnFJbkXNU9HutOe/jB8Gtr5g2\n5KdiRkMnA8N6+2Fy2Ury3DdaXSEz0kHOgSqEUeU/affKAOOoY4p2ND6PwEBX\nWP9frdRHC2B2WuvJZUh/DWG/4Ue/ywH67z5rTqM9gM2JbbuBVaGNkOLEgKIh\nEOIgO+BtQw/8TMeu9zSjW/t+17Q49eocOa5sGuJY+PZ0DXa5FJrrUMbSUMKi\nQ16auTwPgH6nvVKhCm1lvMqmvJix79QVzw3w03Lg2Gl98yTaCYrB8BD0KcAc\nRe/xSwnOqnfzVM8Ovkr7OeCq8088lLO+g5h2gHhLUuuQSjqt8vObKx4dXWyx\nx23P\r\n=y7ZP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUs2GP6YvtkcVX/ab73yiVOATc4iaWKranVWOyX1uCEQIgLSHVHaADIVQ/PHBp5CeXy73v+AeyJitoXF510nCaf8k="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.12_1565260999092_0.6127735882995455"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.12-rc.3":{"name":"@wework/react-floormap","version":"1.1.12-rc.3","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.10-rc.11+513aab3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"513aab30819c24fdfe3ab22c760ef867337343e7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.12-rc.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-jgTtBxXOI2fAjrLJFJENlci0E8EYwIAVrmeFPmd/Obfxn90ET5LvVBBfciUYsOlXqyhoMFs3eBAX+BYoXLffOA==","shasum":"6a1ecbd9d68b82f646dfde26cf6d822a70c567e5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.12-rc.3.tgz","fileCount":17,"unpackedSize":62278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVQ4FCRA9TVsSAnZWagAA0wYP+wdYjkXYTw9pTIC8bFsj\nnPR6lQSuh4+6C6wuKHtgsApIQQIh3nSmHKSCka8dS66EgaVLk7BxsTnwwGwK\n2MtCIXb4klD0/71FGLDUlOyemfJMxUCiE+NGuTszN9HFVbLEwLQ/K2ZjJcGx\nQcRPcz5QsZmfqiP1A3ElEzD6jygAvFGy81latkTTFLfsQVMeLuu0ThrMVbRY\n/O2NQo2Az5N8648qMfH9mVsrBxm3qVE222+wP/7PW8YcDlzy+iAxKR/ZyH8p\n8oQF9F4+L+6TyFst9fboobtjFVX9p5rXYh6OSBBA+FEhUUaSsE6NUv/Xgeh+\nfEg72ZZmNPeW2fuzGMsvNkICqjxHCQ6fY5YmltPL0FWNeGaHSSSuv5iGrKmK\nThOEiEbiZKKBnkUr1K7HFbIM4V2P1xqHJLseLnJ4jNrd88CNtP+ddkFkCILu\njGJYCRhlsxDh0AqJGs7jizQKrzeGL1p5ChNNm8D1+/gT+dPLm1mAJRwpI4fF\nX0K10uAalhJ0vLygAyw7LXg8MuUDL+u3l1xPtsm1Viaw47Nb4i7gB4nnd1/Y\nPyeDkaduQdc3lNGVD5tqmfsto+249ZfkTp1ynEMw0jPGBOKEy8+Jg/mmCRIi\nJIqJE0XB2WNDXwQJPlqwIKE3YoeQW/NJcD7uU1RXfYfX1cYtJ7F/qBWPkuPX\nTv29\r\n=Fhzg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHttVInQprEN0orfpoyEMsdjuRBlVrAsP/IBnasedTlFAiEA9LBwbR3tbI/j8dGdsZ2volJFweUyCXHS5T4gxUKb8sU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.12-rc.3_1565855236566_0.4352250185509172"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.12-rc.4":{"name":"@wework/react-floormap","version":"1.1.12-rc.4","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.10-rc.12+38d4ce3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"38d4ce3f6623b3c31d6c9e20b84c3b7c29972c30","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.12-rc.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-dPRAlFtWRWKoC9l54p2zRJbzOK5QxUv+GtlJyABld2umB7CpTE8Pc0GhT43sLKoau2kjwJkKz1eYmje630QHKQ==","shasum":"587cb3812e59a34ca00639a0207007c4b01bb125","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.12-rc.4.tgz","fileCount":17,"unpackedSize":62278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVWvGCRA9TVsSAnZWagAAwAEP/2OPMifO5gZeYNA1wz2u\n7ATjkXXUh0GDCwxP813ZvJrG6zdacFM4zzaJkNidco73n2CiDHIJqh2FwTyY\nj4UG8XWLnveT8QciViANgPvuQZ2W4B8sdj7fxcYmoNwPSDWMHrqY2uBLP1oB\nzwJcYXLoef+wxzyD/bExwvpvuecmM+kjrBwTxarPkE/Jg7SMJIc0W/+UEty6\n2ua9wcytcSoXmS9YsHPBh6W+9WUL5sFjMmsHtCaJ2GI0WTatAaBwbv3mCgiL\nO/etRsTQHn2MvoFg91fs4QRVQhaKKTjI4i3DVws2uEtiUyvb1lt1vTPUaz1S\nYsJVYU2Bdk7VSR1mDySd/sw6kQYvMqPABDOoOnBDxuXYy5vzaAkqZ142RoOX\nTd/eZyK7qkRp2aC8o9QHcDzswximGYZNvIB73hlmn92XGkFsxfxyqRvEFHUV\nIG90qXzMU5Y7JvqCYid3dZs/L1WvhDBRnAl+rRvOjvQKxWbSO7pEhPZMkiIW\nJ56M9QHo7HTFXNzqPCaCH+wAVm8CBHv1JtAFStG2cYPLdPiUlg94zobk5k3e\nwKPfCQtxfpAXYuNgL+j6XC81dSTyRKdpx1k0H4aNMpM/ZQtOQOXfq+IOYbWG\nfQ7aqWCJ1c4Emrhwxlj7ao4wgJJ3rAypKglGlFpz3I+WHGKDOAJqYWl4wQG0\nSyMN\r\n=LAvR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPDUg7Nl5im/GKjm6UmQAJq64nQYjpT342+gC7knDtFQIgM8QRJOV3fRr15PcQtgfh69sOBgrPfPkab45k1tJn8qY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.12-rc.4_1565879238002_0.33444034161678693"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.13":{"name":"@wework/react-floormap","version":"1.1.13","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.11","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"19ab671fe605dfce0489e7d0ab868d9311deaa8e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.13","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-aMGdPwi/3rP07c89hiR8CGNpjcPIegyl/KnNqqIHoyk1IsHQQ2xEwLSUPiJq0oglm4T6IQpHdUPQ7xstobtytA==","shasum":"fd114e8dbad41a9f708d3d82366c73ba98384edb","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.13.tgz","fileCount":17,"unpackedSize":62463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdVoLTCRA9TVsSAnZWagAAPP0P/3GxElFkR2+zFsBwWgSe\nAhxmWsbTgpSnIrsSLHhGYjUcuQi6AcJVGQXUSY/q34hNrh20FXRRdsoZ8Jgn\nO0zezzpBs89oE55Z3HSiqnam4etsJyjoKhamjwio/nXGF7Y5r05b4gCbGrPh\nvSBsykO3UfG8PqZ+4VdH1qk58RM+N6aM1yGHGrocIBfk6KMHKbSczWdQGFTx\nHbSesSMd5HngM0Px31ljDpyv3j4o1FLRsntp8gq+JEIBFU+NrP7u7H77pLpo\nfuNY28g8SYWJvDx/CGKvP11Pl82cywdBarY5jkoXKXt1BOrSRxS8oGAz5Vso\ntlShriEyNt/QhOUShPWdh3Mt3N69Y/A4yY8yEuPqoO4GUdgCqlB2rQyxicsQ\nxEQv+L7cZtblbQUm3+XKyEx0qlW0kpMin5GU42LkNSXST8948EpEoBOcBLfM\n3dkY8o8j3t/iP6l/bC24xH6p+AbHsyS+f5czoE6g6MIao6PtXhoxceN6v94n\n78qo7S3puKBmmMjm1BL+SGAJmlnJ/9p4bKgwXBqmV870dEJHo7qFVSasMGl4\nnO2Srw/5vHmDLF3tixFW2fUsOHVmX6ZaQAL3dhmoh0wnNJi5+Fl6z+0MQzQK\nYsDfdANpYSnWlaXAJ9XuLodxenFfxK4bd6J7ZKpxzy7yDsrgjsGAETp3pIBi\n3ib+\r\n=5NPA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzl0m3fsZU+xbo7iLUfrBfERJIdsPcMOgDD9YIPK8wkAiEA2CWhmRXnA6sDtZ339P4REw2BqvalE37yAIIrixdjHL8="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.13_1565950674922_0.4995474066778631"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.12-rc.8":{"name":"@wework/react-floormap","version":"1.1.12-rc.8","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.10-rc.16+adf51a2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"adf51a2c0c1982fe71b46cf13e1328fd36f4cb88","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.12-rc.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-aiVMMBo8oQWT/bQDVi1cIXjt1NQ7vhZfM1ITGw7A9/hJs6q4iuLwkwOD/9t3pwob5xMxuFSLpHbZLSJKyCE79w==","shasum":"bd55503d7185692805bffacd2917adc7c3205b0a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.12-rc.8.tgz","fileCount":17,"unpackedSize":62490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdW676CRA9TVsSAnZWagAAOgkP/RRI+Gn1BM7I75JouDce\nvL+g9gnwkjtGHFQYWpdW9PCwEvBay3XJA8YJHV3qiBQZiJ4WbISf7K51bzya\n1oCb31dc3Lb+IWW6dceWJSxxzuXv0UL6+j6I7mbCeyHP+XXALTgUkuLmhNyo\nL8l33q9je57eE+j26YVUd1zemBTNYl3ii4yepGswyXHjCJKJLTa28xwIb6Pf\nURBEeAlGdN727aLeJfB5i19vfyeCIqyCEYS96CwwhWnzgFFdDuXEZIHqT9Wt\nR9cgcjbZTNofbokSxZg7EeNuvdRojnDujpsIl4W0Vgki7/16brTgwE6bWabX\nStNb7ayfI9HGK5O++GGysn+HnkJkNMJ2QQPfHxqw6MvCwePBYvq+RjMosm3t\nMOkmsnSCl4yOQmXUBwskwXip0DpKac7J4wtgnJlO5k3V69SbxSNtKj1aMjiH\nNTRqwOnbyK89RS0Aba/+NWYbMztHg5MF45ITgnw5NEm389PE/bLU7NH/NDLS\n8phOlxhwmBQYYkXDuis0WuyiqF3WrU3ji8DY1M7gEMPJgbJgKiLujBPYki4D\nAh4+W0Orrr2d9r75Z42rUEFoXy13Pwa9+D50M3KbmsrRpx9NQg1lYG22xSt1\n/uHZiZ1jzOOjHygx6lMAhjHCd4Qtf0dmFGKEjT676cFYxTK2zKcmtVrkLic6\nNBYb\r\n=Oydk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2A4XrooT5MKrAHaR1RYOnUHvJWtDDy1dYNFvgVMihvAiA5zUeOIJJdNoSsUf+RhkmtN9I2Nq4EuWOtHVQFpj6TlQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.12-rc.8_1566289658267_0.31400941139266036"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.14-rc.4":{"name":"@wework/react-floormap","version":"1.1.14-rc.4","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.11","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"4370d4ec1e452bd08e2492eabe03548ef243ebf8","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.14-rc.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-yPgeyKs0A6V2a0gdB4EfDuFVt1BTNL+g54s3R0so6pGuo1A7ZeQcQlrw46LRHSQ45Ln2b+Nf9SqnUGspzzdOTQ==","shasum":"00bea47a0067870ca969414d96a5ffd16958e19b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.14-rc.4.tgz","fileCount":17,"unpackedSize":64838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXn2fCRA9TVsSAnZWagAA1yEP/2icquGwT4JuRxYJvPCL\nAyMYB8e9mvD8ADFq3zHKOj2rBVMz4dzDGWmuZQqCnk6FCzHfjdtYzUGJnj1/\nhaJjZ3b/mI7PJbSPOxGb6NTBcBOEWfFXGimLzBdPzgexGApYXmoJUtnkgn6H\np/LbsYkKqu6VBBm2le82cfPzR4YhJiaySUzszuyMBubUV+4WWvue0R+M8POy\n/dTgpJ1gjedKdQl7RFnUFUSsRgt2rhYLbjsc4FMkXt+U0f89SLk8Nyu8oUal\nV6/9p+YO2K6KAwxbPUuystozrS/WlpVu8JfFRJgZwKRWZw5kDzxhkvvG3A5l\nYBWlIDZU4pUKwE7Zl4DHQo5vbDtBZeQ0AhdgIxq3S/1B3QX7j/c7yxL1a5uJ\nHeM+c/bhAiYgGx6QqQY/CFN/7TVPiN2VtyBbzOpKM7DeiIw+g6L5opGqSFDk\nkkBxVSHDfhTUM+egyIEjkKKnimAN96eUkCHOiGxoXTfs6HjKVJkic20sJHaf\nXXAs3zkBQdFbNwBOlky+AsMdjgmLIsKB+SKdFNhAbi2Ae8Re41lArNeImlvc\n/T/0AKRg7KR/fY2rgXh7UmTfa/DshEc0ldfaJmz7vOsYiG3uCZ9P9FOfgutj\nkcO+IHik/MWwkonTU+a3Rr9XaQ+8OAW+3sEMSxl8+6JyWN4aV+G6d/TmKvHc\ni8uW\r\n=PfI3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp2DEy9zqNs0q2XE6LzWO1Jau6d2aPeOSGKvdhqy9ZPwIhAMztuZkltGb4w8X7ck1XL6aBxk6xtVPVL1n2d3ZNunJG"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.14-rc.4_1566473630968_0.20978335906277112"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.14":{"name":"@wework/react-floormap","version":"1.1.14","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.11","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"c4eb5615c7d23373009815b7e10e36813ac7716d","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.14","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-2jRthZUXOVbdMYMMctxRm2RBselJ8xSW+2Vku2HEASbJEHdSVlgj17oTJxy/0q90Ck6VrdSl431WwU9nO5qmng==","shasum":"e94ca5d0d58f8b5fe55fccdd6284df7a82053147","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.14.tgz","fileCount":17,"unpackedSize":65185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXn80CRA9TVsSAnZWagAAscEP/0l8LiGWcsNgKhs7er59\ncHlYH1i1Yl7cxeHxZcbXFs5q33LG2mwmPe/cs2Glokv/eJ/9nZuODIU/xffb\nbr0Gqxdyig2gKws/RYN+VRjLp1kI2GeYlbBL3/FKh6bxqYn9Z5lEwT7XUHi+\nparGLZBsLJ4yg+sFYVF94JTcmT287orqowsv0bm6UbAg00EgAvta3h43doEm\nXHqMgfaFg9fU3iq0yx9odWaeNucT8Xe5nfX1hQea/8TYwf3gHg86M8+ALX/R\n5x/c7YXXvYZKYalApH3j/RqBuSFybQzjPibXGdiJkOr3Smah+rsT6+PcMcXx\nOI18jFxmOvcxpNCcDhyxImH1TypeZP6KpK+l/xRwBdPc54rKQjwpnPLL8ftj\nCrzHEqhjKkkld5fQeiKT8VLc4b5DjVtMZkjjOiEQE/4f5OTWmolv3O4scZT3\nHOOYzmvok7ia+3A2XoCsWMcquWJfOustl+r9/+1uONHa3LsHNBKjUI23L++D\nUjUTVaiYRRkJMhcBKpxFFVmZKY/ASIwRNHeIlehO0BbmHWrSH2IAbdjQutYP\nZeAklKORXvsC5iX/R1Mtdc4CsfD70vzFQoQ2jdZe/RKnY8m3hcEt6OOfjeGR\n1GZkXwrbIUX6LD5oiJjeNWdfB1LfLeEKT7uIs3OggenqohaYnnQDN+X3Lyy+\nasSD\r\n=H74k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7yayt/xkTBct+I7TPyj4cOtzQAV2kcOWck/KVw22jtQIhAP9sn3DE7h6xD/M/Lf3VdGtmWMvesojPax3yy2Nf8c1t"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loaygl@gmail.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.14_1566474035502_0.049906764208520915"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.15-rc.1":{"name":"@wework/react-floormap","version":"1.1.15-rc.1","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.12-rc.6+70be454","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"70be45404f523c5e42a5889652be0abf48113abc","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.15-rc.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-awpFWGZ0j7cDbl72UtC/OmCy/QX67Ca6/6hOAXJ7UaBwO1FMVBEg9FLhdhEFRxQK/VolBLXae11sFJDL2YJqgA==","shasum":"7c60823bed7602acb1014e097bbe3cf43ec1d114","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.15-rc.1.tgz","fileCount":17,"unpackedSize":65211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbkpUCRA9TVsSAnZWagAAMPwQAIbXzgR2Y9xN5iHYGB1D\n+euTzFIFAi7AWcgbcJflK/9t3oxm+x0b2M30VGVlLzw1AwrXrn5iUkk+a2tC\nI3RWcFXbfXMA+d12Ezqvi41vmd89JVWFLXwIe69ORYXmHE949CLGajz7YbGD\nQMLrNGQ2zdYlhe7LCa0OEj+rUfrZd8gsPIWcjvtOoGRAYHF+UFORv99OmbFV\nyp7TjBb10W7oRR3df73ZgfgJIO4GIU6x1fzEHq40cjQFLMHXBz9YSjnRWAA7\nZWDk65IOqmQXeQvQdNDcNb35mZftK477iTCY85fcvMJsKeG6chfktZJ6AfLH\nOBGyljsp1pACLDUeF3egm3+69HLPBS+ls7IO1YWLGkh1ILO5puxg65ycUj8i\njUZEvYk13B00C2NIoD3pbROJL2RNGxch/a5z0XvXAGpBDXQCpPGHyExZI5Y8\n7towBbexLsRVvlZ9SCE+eL/hZMOstfgpkNRZ2UceSR4aEV+ePTqyag947qNN\nbHApMxBDx8kFngXdq6iDHK6Db3e31lFchF/3O52j9G18SAxR1Bqeq1VBz8F/\nQMKJ9liF74DiGA0WO0CJbUddO2sk0D/PVosPAqc+AD2NUs7x4Wsd5+BRPQ/d\nLePkC/sm3cs6SP/sca960Dm56NQ4PrSboVMSD7LK7FkOW+h8W0Od2fYDOaqT\nz1ri\r\n=CZSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDR6MGTQtPpV32PwwaD1B+LZ1pfdTXM7o5BgmUaP4gZuAiBMvizJ51WwAYYEUwPOjReEgZdcebJt/xigZeWe5CJRyw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.15-rc.1_1567509075606_0.5729900093750693"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.15-rc.2":{"name":"@wework/react-floormap","version":"1.1.15-rc.2","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.12-rc.7+1eacdef","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"1eacdefafa4fb21246a09340b79d572c8ca3599e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.15-rc.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-2ABW6sUHCEfUjDJ8Oue4JZKeQytzUd10dbVgXjspHjIg+4RxkknB0igVaWmkHswI/sX1nmj3Vi5G40RR+iG/Bg==","shasum":"8f302a3ea809b6fa99794fa4af1ab387fbdc5731","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.15-rc.2.tgz","fileCount":17,"unpackedSize":65211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcGthCRA9TVsSAnZWagAAYMYP/iMOYHNNI3OrWBqzQeiz\nqjzg23MMTZjm1clqjvNsAuHJkIktw8+AQjzeV7G0w3/JZ8jcvHx6wS+GUXP/\n09RKjE5+MWEPKlnFRH3W0A1rCwmxluU/Qh50XbnwEQz1l41Sd/f4Vv3VB36f\nThM0ANh2mE/v8B+G8wRUynu//i+4qnG7u/YF/VJPIjzxgVe6wtHto7wBcNBv\nUgId0Zozrr9EMXf2GUj6sC5Cd8sS3bOeKVAcHIxErPe4gXsEqXqgqnF/eRYh\n0CvERANEcQOnUbdZ3KbtY6U2UDa2U0zVox1BBxfVCtQ9hzB9MBlfVpgGmnZ0\nd9oqfMLYQ38/2N7lf5Ulhux7wwATDwru8D9wCFzzThZ9gQUx8Lo9f25rPY5d\nS/INHVIaJA5yheJp/5RTteQnGiboHO7li2FhU/38H7lQk1VL10YdLLAoOVkw\nsQmJL9FJImRrTmNuQsTvcP3OQ6AvDlWgsMDtdYk492Gzp/ndg1+HXPAGdkNs\n7cHuEQKi5/E7d/+fk9pf/Vb4mZTTzJDyAPsRY8KM8qzN9Kf68p8z08QY1NGw\ngxlMWMcbFgTiCY52XU7cAXOPsevdErwIRsV2hxEyzTyp7E85XxnbfbQjrJA7\ni92rEena+nXHLTaPbm2ol05blc46alXavAVrjrr8xV6Q0twYp5Pk0ExT2wQa\nyahV\r\n=SOfJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0G1lNb/OhauTm8i0JdKMQVLcMVArn+7cYE4r4VnburAIgBybcdXByJCv5a3uvPbcuYbygtMwMztveiVXu0fRIXoU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.15-rc.2_1567648608773_0.04292630077104276"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.15":{"name":"@wework/react-floormap","version":"1.1.15","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.3.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"acf6b2adddc31157ed341271773ae0a681163c4e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.15","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-cbiAfPRIT5XtHUEHk8MXB1dxK9Vyy9IfQvU2LcFfWswKxDGbuyGyaIMG6vkoDeqag9OgYQ2vDEb8x32vEVMwaw==","shasum":"dcb1f55877e38df278f3d1d10bca566db432809d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.15.tgz","fileCount":17,"unpackedSize":65396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcLFKCRA9TVsSAnZWagAAtHMP/1tZDsG+UhPfYfgsRfBP\nfbzaObFi4mp9pZO6ewQlx9IQ8RtdO/9oIx28DVQdgBmKigsWcoHXsjTqp9mo\nnIab/X8ef0f7u9lpgNXmzEIzpptA/1ysDimQayzk5UMzK0nny6GVb9HPDXZy\nNO6Ft/+HU2s4EWdJLI5FAXHXHi9AnLASrJGDHc7coQUaCjjs1/nmgX88hdiG\nT4t0CsxzcoQwa22G+DCNhctYchzyxtepACZR3JGn76JkkNhFI583e4gXHb9R\nZhWLFKcSBPCJyzLX4md5XXaGRuxJOsFYg1oiJ6DyiCTuyZ3pz9LwSFVRqex7\nwOtgQ1L/rRh9A2c8iiWa4QXDO1pt+H3fbnxL/ptEE0CqpYSRnlc/Oqtn0wC5\nmf2JZShjapdQXjaR/AUkcQbjc7KrKlHdEShO6fZ0vCVxDANVIaBDYMbukO83\n9ssoOR0g9Xs/9LduvvEWpw51vBPhfKFd/6zKYefB9/GMjGSOkF2VuWE48yhI\nzm7j4+iJl5rU9HtwCWVFWdnHqQGT25C3vRQL7YRHvL8iGFhobv3BbV9sVur8\n8hsxd0/QnCwaVLQMj18msfuLQFwjeMbe7HL7+3kIKdfGUT10OeIdvv2Z1xv3\nSvXBQRx3qAABQ3t0RwUbHU3te4GhtBjJIlnqK/mt1nNPBleyB6j/4Rs1n27P\nuCX4\r\n=aRvX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGrW749xnhUyuxqgQ1aygFokBAUhdoMELM3QikG2FgXQIgAJxfZTqPyphsmduVl/akCuyQhbAO9VN8uzdH/kbMQbY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"mathieu.podlewski+wewaltz-npm-ci@wework.com","name":"wewaltz-npm-ci"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.15_1567666505617_0.2853917418766756"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.15-rc.4":{"name":"@wework/react-floormap","version":"1.1.15-rc.4","main":"./lib/index.js","module":"es/index.js","scripts":{"prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","dev":"npm run build:es -- --watch --verbose","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.2.12-rc.9+e345af0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"e345af0b80d245b02c661c4fa646e0f97265f6ac","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.15-rc.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-FSrdC3Q/Ig0dP/onlXAzWRpbLHaaMuI/gjz4Hy78Y0h+Sojzr6ZJ4iCWCPZcW9aMOtW5HkFHqjACzo/J3WJgGQ==","shasum":"a3dfd2ed984149e79fe6229dfd0f482aa78e33d7","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.15-rc.4.tgz","fileCount":17,"unpackedSize":65423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeb/NCRA9TVsSAnZWagAA6M0P/0MsLXj+6fktssCslq4a\ng3XYoWXEhHmuOkiyELcuKfnryYh/+SXSSeEXqWD+ymd/7XGGXiyQQHdN/Y99\njXVrqaKZb9Fp3GyNHqwweEJRY5J+jxVNVGhPYZhnURcLYfKAOmo3Zcree2Q+\nkGKtc6Vni3vX3T6euc8TLNWCIj6pD0KXLPJTavZvWEFDE7kZXt+xCYq0TWho\nNmJMTDb3YyGhQKQskEsxMP6XgC9MMLL8RKp1OQR1SUZssCCCooQPPovkuRLG\n01nJtPYg6KDlE3rwpTirqq0AM31BH9tPbpGEYcHH97Bt/0ZZSkW3GijXVSTU\nPhch26SQYsCPGir/AO4/RsGrIjHiHmCzt3Klvr9rlDI0wBd5qCPGoDPPBFaK\njMgvKlZhMDhYZOdRAsd4xNmp0kRRU3U3xmw+s9dG+MDwNjGmDH/ikZvaAF5M\nnXx5phnljnPLFYDrXjlO4W3JUQPhhUKJ121OS1/M+0FPkvWVBtJ7O6YYrxxx\nhKsGAPv3Ti+HSZgdZ03vMw5PQwHPUBZpA7WIBEs+7W/cnqiUuPwKTA3LHRlC\nig2+f0s9VS7A4K8994dxFS0h3YRRggo3dPXaT+wRNYpb3OMgFiQkHL7bgYYW\nCSHI1Di+HCiiTLCpUE+ParBmBTUxXSbPUp4ERqK4N6vuvNKWIziWjqsAq9QE\nfFzZ\r\n=1eEz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcnnWgpiybAP5kLb6cc/Vwv8SIz5HNaqN3eD5HPXTJPAiAM52aEcYGymr/Ny1RhCgX08e1MqgvyBNbLIUSj5wGYzA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.15-rc.4_1568260044339_0.3929332476841163"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.16-rc.13":{"name":"@wework/react-floormap","version":"1.1.16-rc.13","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.3.1-rc.13+6923738","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"692373872402d2fb782ee2ffab35e8fa94b695af","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.1.16-rc.13","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-nryNMpQh9PC8hktRqk6vTDuBHi247gfHXqH+TckhEaJNuoXmQ11/GCoqTDabtUQ6abYDCeq6+eyuzebfB9LgEA==","shasum":"880e9a31b5c53ae9a4447cc8cb878b5a3556f6d4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.1.16-rc.13.tgz","fileCount":17,"unpackedSize":65430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkZfrCRA9TVsSAnZWagAAKaoP/jh1czb/FIzfV9ABfIFn\ne6+GzIuZRgp0fH28j8mIcvwDxN26LO9+YbFFWdX3gIa8aINGBO9JORNNglQp\nTbp5JwQ/tQ5iJ0EsItYuCWKNIxqdzmFCw1SOeNrlnEpGneYAelaAngCv/mBq\nziz2LOH6m7TuGI0gW1x/mKSlctsH0UwChu3Qqk/07ff45yYO645nsGdMHpgu\nduDZtJVNKAAHPcqM+UrH1Le5MS9m+uhfNR3gXlWvYkf5HVEZjSGBKlN4BhTu\nrM/3Bn7El990Nly/hxGHgfGPXAuLSM6STatiSOxIsipsHwFCuVLBK6I21JLt\nt0zwVPrPxOnH9iGpTTMPoIOOqqtcOItEf12sBf89vHRol9v++sGxWtwvcP0N\nLg0r7jYxB/QNC8YGcMJD//thQfl7HQa2pXW7uN2lHcTPvk4re24WioeVvVzL\nCpxnQygAZEANTz84tEUFhYBRKFQcpkzZF7gn3xk91Y1A31797HaKAntTVRyE\n4dPYu/zmWdHRU7Kr7N3CZtARjfIyjlNjPdpk+Msog0V6AO3/izR5+QRQZgy3\nJC7ML3NECm5H9lDJ/fctG3cC3X+VCQi1QHnmhZ1jb9XWACdZGL06y4A9YlIi\nYxn3vKP5SWOzRcT5d+7lVzQvOkrpe6Wo0bdZ4PxZ3mcEM35xSUFUvwlHSDMF\nUHNY\r\n=S8Zg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqx5z2Up/2jDGM/9cETH6WQRTIr1cGGuDFQroYa1CToAiEA/qAEOsEr3CuvGoYRAB88x2GY8+Mv3M5q5WmhOvfAXDs="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.1.16-rc.13_1569822697895_0.014011228743190163"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.0":{"name":"@wework/react-floormap","version":"1.2.0","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.3.0","@babel/plugin-proposal-decorators":"^7.3.0","@babel/plugin-proposal-object-rest-spread":"^7.3.1","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.3.1","@babel/preset-react":"^7.0.0","babel-core":"7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-plugin-inline-import-data-uri":"^1.0.1","babel-plugin-inline-react-svg":"^1.0.1","babel-plugin-lodash":"^3.3.4","babel-plugin-module-resolver":"^3.1.3","concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"71d73e3d7751ab0a759145396eef3fa1242104a0","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-CjeyysH3VP/nprzlveJcslmBAgJdCzYZ14L8UivGQjU/KuhD89nYEzVq212rAKGojAYwhROGexObjJKejR0cpg==","shasum":"c37f733f838c8ba5286057c63945540b2f0a1697","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.0.tgz","fileCount":17,"unpackedSize":65749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkbOyCRA9TVsSAnZWagAAJzAP/RWsm6S44P8Z0Wis/A/J\nitF+P70rd4EZEm3SicMac+afGuxOs43bp3KNSWBPLcGT7ZIjHVv6yajoEpfn\nh0baB8lDUi3YdE3xJK22/Zzmz834f8RPxCViZseRj2XcEJB/eISlWQUS37Cs\nVOVnpcW5gS+dFh51yOMRHeV3aSUpv19A1reWy23GER71TbDONP9xZABxpcG/\nLq7rD8jGpKrouL96LvqBxKhVUINe17Q1i/Siqk8UEFlSo+w/kmfa422xrK05\nbz+nWZTu5RQtd3Q1/V3F5BBPoFJpWP9DWz2g76/7MDEVvin8fxQzEdh2bKcx\nStZBXtiias6L1c+fXVhgt/dxlO1vPPtvEHm0cYCvz0GDsLkLvgjvhu68IJmG\nTDmBkGgt55V3J3ydjq0WVGwZxP5th3wyS/Uuq+BHt1x9HZghCdyPmz89HHdS\nuX9ql7mzK4Pq2msaO3XbNMyxUr64SHrwcLTWHgmPMFzCSwKI6ONKcrKs1qej\nVCOLNWLBVAXgRBlF8sezrD1nUBHpo0JCD6oxczaMq33VYCRlMEkz4m+eYPbU\nx+sFCI+VJiEjALoY1KjeykPpPV4+4LEBZLV4RoVz2t95pbWWwhc3P06QWt7D\nrF7Wpne9+uawQ2JDWcaRLqFJ1TTGosRHS2N48qgRy60bo20bOLYv3dOdZIwa\n4P54\r\n=KE52\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXLbgseV5fpNV93NUkSpQ3BRefAehLy2BKYT89jAjE2AIgUsEoxeTHfmNv9RU2SIzs+LqtcaepHoiEAykglTKM2rc="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.0_1569829810306_0.6566840248201464"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc.0":{"name":"@wework/react-floormap","version":"1.2.1-rc.0","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-rc.0+316898a","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"316898a7334c8e3a1700233f60106a7838bede2e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-rc.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-5jXKrJf7IBwWInL5bR3YCVrYPmn+k+fKIVL7Ir26yA4XGESZsSY14KMQPdjBOX5FDWKV5THzbfUYbi/tzJ1ksA==","shasum":"7c105fa8fe818484ae51ba7cba5141a63fa6d4c9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-rc.0.tgz","fileCount":17,"unpackedSize":65180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkuR/CRA9TVsSAnZWagAAypMP/0WvEC8xoMFQdLjdTj0M\nJ7y+yu6Coqx7Jj939xIvsdI1MURzMTwl6gJDsp3EADWNlCdYtcUqPF/2LvrH\nFgXuIhlczgpm23yLnDwhVn5ghYtDl31ehyX4B12USOJc40c+I4F5V5ch7vMc\nqJzX+RsnikeY/IA+zU1qUp5fJJ00DVHifSpUZxyKsakyEhNzZI83sAFCMwr2\nISqecCGX+b6csjPE1QwNDqviwRD6XDD0zQnch+fSuXCsfOXV2SJDbKGNuqjh\nzMsMAOpRMHH4Wea1KpNoxSw5ZQYEhiVDe/JTYrjV81TLaTyDXVT4a6TzjE8W\nsg6fI0KIl6RcTEz47kqHodzLS2hT0xMUJ8/0lg+WeBp64mbGFaY4oIyDfJ54\nxZ6k3LR0NRrBrRdURl8YoGz8yB3C8P61e5X/rgXoShocXX8SkWl9WxFjzHvO\nPKNBkspM8zzevZP/JeokSkdXDnNXwzRUkTPbbyinFv1UPdAyuBaqFmyRDr4m\nOuatEH5DcL4DUcEzaRpC5+iibpsb8+Q3sdifQA7cyQh/W+oRBHoRUOlKp1lL\nJzjwPhohKSJteFvVG1cpFYVAmj7u6cfOSqB7ri6orJr+dCBMwLNX4O2j9sgc\nO2WaRvDuT15RqA+91sR7KZKPtDOpSG8Jecd9zYt5kQVqZ9Ei0GhTi2hDRdCc\nEhcw\r\n=CInN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDzktAT7umxr+RWUOS7pRoATFnX/9jZWOy9TWywXU2KwIhAMJLXX22XMDWlymxFDLWU6FDiok+4H0UzjU38ByXFEWS"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-rc.0_1569907838259_0.683755201542976"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.2":{"name":"@wework/react-floormap","version":"1.2.1-next.2","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-next.2+4e3c79f","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"4e3c79f274e34ff481c39a770216c3f32bbae689","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-next.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-dPuo64ikHtNa2EcCHD3+NdYIBTuaAgq5SEIgpqxnYYtDzygBtH3ARIU1Jpdilwiz+F4dD7q5oi1eT71aPfPW0w==","shasum":"eae4cfcb78330da96f0fdd4c24bb01a2dd200115","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-next.2.tgz","fileCount":17,"unpackedSize":65184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkwa+CRA9TVsSAnZWagAAps0P/0CSdfN08AwcxTsx8WN7\nbYlSuQHbI+hw4MjN6Mg0PqR+x9zrWF5y0DwcF2Obuiab1vxgRaV7gub1QtRW\nSdbFd2qaVk2D3SCylY4tPlGkqSQ4mvd/CU+yEi6+aTvUbe4SxvL5jejL4C+L\nUJAmU+FEbliQjSAzBjMrLM38j9AhiQQRmSc4HnJ2XYRX5uZtEvKAvAmtR5y2\nJiYrbk8sZwtP3jka6LpH4HbH/EcLraFKHM72dl6yn+Skpqj2EWO/PBfgXpeF\nzHK5xoSO1mXk/6rqy2nwbqB34Vfhq0jhTiqwIz4QY6j5l7qvKwgqJ+Lrt+Ye\nuBeZS2sMeuUDYtCz5BA43PzF4tEXXDUJC33x+04ORt5Z3NhWLUGOltsqOXHc\nrY9nBixHc2eENQL0fm+i4ETcj6cKTEU4mRcFfBsWWkAMUYvoJsVt8mFnZBti\nAJ/JEC+sfk3nHpXolqPVQPkmctj3n/7bSSLhg5v3qZklvdOA01ai0vF6YwGm\ngmU3QlmmMmeCv8mYHUglSMUTPIwcwBJaqLjlV5X4+OIxW8eTRiCCNesbdHmd\nFNQxRc3IXw8Xf4OCOmPw1KZaKRe6f3FJ8vhb143hLeX1dyn1f4IL79RHWaxl\nJeegN/AzdK//qVNhct2kvxccu8r5VstQzppsNosqatUeDu8q/emvAOx9eFnQ\nHFSW\r\n=fvmG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdxP8qntoOYi5acJORtLis/XBH7IS2KQZ72DOzFl9uWAiEAsyF8+SEVqh0pSFNkzXF7NCK6mSDCAwb/+FoLXYDhbwQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-next.2_1569916606128_0.43088126268500515"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.3":{"name":"@wework/react-floormap","version":"1.2.1-next.3","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-next.3+db12fc8","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"db12fc8d769c39f3378d8db96d1ec0b228f07258","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-next.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-kNNw1cEYN1fPgzBOXDIotU5KujjHkUKfgA6Ri+zVHn9QNqqbl/DparB4f3gEvaQw5UFAB49joz/LLNzqSyWgMw==","shasum":"2b92f602c09f953be52c455ca4614fcddb777428","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-next.3.tgz","fileCount":3,"unpackedSize":15073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkyN+CRA9TVsSAnZWagAArHsP/3Ho+6yfuEKfw4aBeOzS\nqFwAkzGK9smkPdbFo2HVyoh9R30iwYkBcVI7O9VSDCeJzhjEQy/JJ25xWPR3\nOkUhZBGX/D9+zfHN7g5aYBJCXi2/Cn4IeMkK2+dsT2rxnTxzw+3W3/J5Sp/O\nG0PV3gPSKW2e+dfvVjVrIA++12+GhMC+Q6pv1kVrzNmMqtgCyvUsz7wMTREY\n5XEz6u9mcpBQSJGr1Xh5Q+lX3V7C689dQbNwueZBq5tE+KBm3iyb8DUzoL2C\nteeSGTF4+OUAowsiHcNxk2NrF7kXkyDr/nwRdoYkE6AFS7WsQg7Zy4UQlqgo\nqf/b3gVftHzUQ8z3apLutMviArdgISkej7StNW+3KDn7Qgjur97TU61uoUco\n320KeN8DdOSdk1WJAtZiEc+SipZqSx9DROUXTluCCZeXL/OQwUur6sDqd36L\nQ7uDxKY3BlAZSF6BeaizHZi2hci3rJkw5QHZVzkimdus4/d14u0zvPtAFNZN\nT4abrFsOds8cSgvNeF/xokWwvDLjsUEoZ4Az9OF+BfOxIrAwSFDhuF+nRzD9\nP+FroOP+3tlsyOzFBJamISIR1F5NsUfAsdTjGiSCoryGU1pZDZQSjSZ6B+ln\nzzpnQtFnqtfqYBWel7X2V9S4B6sU4tjxx2UrLENUexOpHWuBeKNCyK6k64E0\nPvOp\r\n=nB1D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZm+RqTqwYBN8gnspXu5ck+iTSGqwZiyzPeOzF2w8EBAIhAMSEDP3z13KT04KZZfRNYiXocTY9h1UxPmiJzjKD6WUC"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-next.3_1569923965582_0.7857237791944245"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1":{"name":"@wework/react-floormap","version":"1.2.1","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","format":"prettier-eslint \"src/**/*.js\" \"src/**/*.jsx\" --write","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","prettier-eslint-cli":"^4.7.1","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"db3a8f6e3b56fe8f9d914e39b88dbfd921a34d2a","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-4rfSKnvyNgMOJtK3N0zWXvBeoBQkRLITMsBYaSEJ5e1LHHoAvASCoAPD6uX9VjcRbObJgE+xBzhmXmekeQr5ww==","shasum":"a7cdfd6af3fc5ee5d589deca689c290c2ce3eb08","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1.tgz","fileCount":17,"unpackedSize":65363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlHP1CRA9TVsSAnZWagAAMiYP/00Q8T0Lo2KRfJltPK4K\nupLva5IFKXbI49m1b5/jjqwg/hsjwiGTeYEo3P+/WoWx3KKXvxd6ghjqQUs4\nqRR7TlaFlPvg9fMMwP5jNUOOAT8TEbx8pOuwQtMQCPFRRciSHRruT82TKaeJ\n1RBq5J6+4RtmUbYvbU9NrWNyAKNrcvpv9kF0xhKdyl8YSWq/HddQi+heLqKH\nsqpu4mtaHqr8UE/Kizn9k5lvzs3R+ABZejHu9JsuWyLbHKXZQf6+btxNIxl7\nL0iqFKmw/wUo76Xfz1QvBUtZbOACfl1xoCMiT+/KSQjE0KQXYc9YWrgPpsQd\n3NoueV/DbDL8ADzhOPuZkG26yTL6l0EFH6TOyaU5bptN09t/LdqjFXOaM311\nQYEBiSeDwtp8miyACOoCXljXqINgIj3SUWXy/ZBY0Z5zwsjgMBbzlYgruZhq\nzL77kU0oUmsNCwQyjXv8zDxIwg2R40lziNdMggMx4nxgOzQhGrcYi1moiLfj\n6HnJHaTEOvYVPK0bPncuSU+12qonqEI3pLv2ILvT2xOY5jIgkMWGGIJvwc7j\n/kkmLbBOMCcVHkgesbrwUZHNeXUQVBVjrlefBVuZdGrYs1R6ZU2B3/XvFTVP\nlwij+Y5x7H9dOew9T6yB1lU62Y6QBMi78hqmtEmDvf9FQPAYnrPzoendTM5v\nSZQO\r\n=bo+c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQeS9jN914hqDNcRBTdM91gA/TC1PzIjylkALM4wnVjAIgVZD/RSC8fBElpy//HC7U11yoDSxkqS3a26VaEHIrYOo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1_1570010100854_0.20798689346869303"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc.6":{"name":"@wework/react-floormap","version":"1.2.1-rc.6","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-rc.6+be29029","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"be29029ab3496b7b7052023ca7041e73ca466ac1","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-rc.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-e/isyy3WWUzNoD7q42dV17xsr1o51PyfnCBI6wRE4AZwJqNYlg9sNJtLnzND5elFvFkcy8FSIvLrHLMziZ1hvw==","shasum":"983e76bb5ca9cb65085f03a3ea80673fd60cb292","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-rc.6.tgz","fileCount":17,"unpackedSize":65069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlI/eCRA9TVsSAnZWagAAYnAP/jIPLtTMLun5yQl1fCnO\nMX8cQhV0cbBvf8BiT1CQAf5RydNf5wIMvbRuvPFyliFUSSmRxs754pf1rFBn\nlbxHgG7RiHeYbPDHtbDsKc1rOj4s7HB5wD4IePfXFffF/eu/Am7WKjozv0wu\nISXirv/IlB+ikQ/Sk+fx7IRmOh6NepZCDxikRVq8RpQLVbDSUAXl5n/sqikj\nCzo1w9mwrqUCfhOEIGxH14wdpkNiovzrMl/d5KGCkGgQC1ezrfsnqWURQmgd\npFXB9rgSCphbS+4gCQ82BLJIEolkX9gpXL8YB0mUfXqfjsDHrpQzkx/lEO8G\nOJZgWFOXicnoA9eEaaTxajFcykLN4V0tjY9v8GWzB51x6qFtyCfUmBIx047e\nOEMhycow2+gpFgNdscnJMxgLzbzYimG3MrNv8hWQD/gieIQb0xegXM1EgQW4\nuLXRGklVbr/D1dbXa9ysuQXpltD7FfHoUmfBMn/WPN9ksSZB9izPby1yjQqP\nuvCHCfp/4iyE2l8qiKOx8JfguB4y88uE6lV1PDC+0zDxS8HGMb5E4L3ySvhr\nRXb1+G0c/G9bZQAuF/12wgZdkkL5gQMTIdiaACF4CW5fM7AlGw12ypp+cbsD\nWFaKKP1BkA9OSluh8H0kUJnI6vB9YoD/fxKDOF0ihQJ6auK2/UugtCIgzgj5\nBLeF\r\n=8Dgv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCtZ3O9ujAhFDkFr/yh0SHgS3diKL6wvLmmiK3zm6+hAiAFmYgoIW1ZlBZsymDBq3WtPThfRheqq2/+tmdj34ZbCA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-rc.6_1570017245970_0.7687282106877811"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc.7":{"name":"@wework/react-floormap","version":"1.2.1-rc.7","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-rc.7+59a37e7","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"59a37e75f004b2009713c04bd137243764b92885","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-rc.7","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-CF+oY1+O35cGP9wggdXuY7tCwFs+emcrpJI8bMADeQGTN89AFISNGH4dWcOAqBiZVhdMFovvfL8O35n+GxzyaQ==","shasum":"9b2b95cb9d2fb4cce93cb6e4e7ce48cba561314b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-rc.7.tgz","fileCount":17,"unpackedSize":65278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlJTiCRA9TVsSAnZWagAAI/wP/ibc/TQo500XgyTExYZ9\nN7r205GSG8GocMXg1mOvYN4/3qmAivyB4aKuGfrxMVMV4/oyktwZR84T6Q8D\nyidxh0LCQNHH14mPtx/YDAJuUQVSeWVj0VONTQHkzzFNQ42RZUnHoKZVWN0c\nj7CwKzKNPNoCpHLs+CkI6gxrpTefjWclzAfg/JNrAlZtfoEiKYyVkgvHtGvY\nTHFE+fqw2GhHdN0Vqbigxuq8hJJey/wd+HdUfml6BAOk81kGPn16jrBmtryD\n5Lv1yBXNLD+myzn2lb7cQSmQkMcNclSpAxP7LeKHoCN++KUxxflIDlQQn5nC\ngrmIZ2WONvLlA5BHUi6hcQCo3mwKrJ8A5g7WboVQ+RzHEV4ba576PoYQOxl9\n6tCp8bSVQX8QWN+cGDkf/pbhhpmvlRC3gpXQdzTfTOp0X8q0wJrCjAvPwoaq\nRqLpr1ma7NEcWFzyxyJItWFOWy6mp7xqAodjbEig9rtau/UEzVXdypNTTtQO\n0mqixW7vzVxtnEcQTQyVXFZDRLu20P/vqxkJeN8QNem7k8QeNdxfLJUXcNO0\n1qGDUaS9abOYfk8iGeLzCtWqZXLfZ62L6zLeWoLMuO8ijH44Urnit1RWXEAY\nPCaeJoP/bevSS1ZShxt/LzdZ+zNg0SkeQ0mp2jzuWuEsUeEPsff/V9FyanX2\nknWL\r\n=uUVH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdN6Rpwzf7yodI9m4IDRK0nFUb+vzhNC32vJ2Y7YhIbQIhAK4zxDfpMd5SYMYTseSD2to08WdEU1EieNtndXmjOpYJ"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-rc.7_1570018530288_0.4741163942945936"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc.8":{"name":"@wework/react-floormap","version":"1.2.1-rc.8","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-rc.8+797f601","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"797f601d61af2538700820d9fc2e5225db96d7a9","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-rc.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-qdprApRyRnCvyFadgHDjB+cExmMFNP1fRFcXv4+FO/JX3BX0DT43mI1b76dUjRE/5jCUanxtOE2IC+Y+4a/scg==","shasum":"eaa52cc15ab80e5fabf40e486085e8194df0660f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-rc.8.tgz","fileCount":17,"unpackedSize":65278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlVzXCRA9TVsSAnZWagAA0hQP+gKFc40iQt3CDMsDQvdb\nYQK/nSbAikdbp+VUj9PJrlzYqMq9kgF0Jz8fovBAwd4ir5+1QlCF2jf937Dz\nl+Xv/z20vpKXBewLJQGPOaiceFSvqKRAwl5eBNI7GaruFudjVnuzsyMLYdDX\nTXNGChChR8dS+G+wniND6+nV8oCZ+E8D7C4MGvpFp22PLh7Fsbpig0iO0Z+N\nZ47kp5kSWA3KCJf8iMPi2DtAFwY6dH+oP82o9n9PYf8ZAWo0VbawAXA96BsL\nKiy6bO0jr9Km37YiyiAk4QrSbLBLe6imiNOX1EklBSW0DwnXuGpfc93A9air\nXckw6m6nm7pg0xQU/WBTAl5R2C3muBRSkmYEbwapP7y95xqhtSjys4bKhD4m\nLUfCqv9ix7Y9SBPle0Gg2leQlvWLmF7BDd0zx/ZTpWSneS0WBGoYkKq8Xn1D\ndLcLHNvTGVR6s0IqZIPHdg7sNlJoBj8pxi1lkYQLCns6TR55JP1yFjQx2P3w\nSZVypRD6CHo7s4fvS4nX3UHtkpHeizMwP9yCTTpsY3QoUvVTL7ZyMcRO5hGs\nn6N3x17BBUHZF65C6gk3HbU2GN+LMESkdD8f8yuHv1+in5YMGe4aKQ/RUD1n\nLgtk2vqM6cdeOo38qqwltFxQ8ia+Kq6QawusKP0triu7rdoEXIRqF1T5eWA6\nQ7Nc\r\n=3slR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlci+/JQ+SZs+bF450otnmtHKX+OwC9z1OiLSvhMaM6AiA/KBEFPuonb2nbnajz+bhFp/Z31yuh/uKBws9+PDqHVg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-rc.8_1570069718523_0.8776905266284438"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.2":{"name":"@wework/react-floormap","version":"1.2.2","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"5935f7d7feaf36feb9592fcb01327179d962e79e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-eFluhE5VEyhmFF6HWeBAgk/2GJBZiHQy+ImAAVtTghYWnMO5sNzPn0K9KlUsqKs9WmIH8bLX1vqiSpYWDGoUWQ==","shasum":"1a4f6086fb791c917ccc0d7a430a469302179021","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.2.tgz","fileCount":17,"unpackedSize":65610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlWGkCRA9TVsSAnZWagAAyhkP/R14Ln3xcEfcFfN/SrYL\n99poD+eu6PYtc0xdUnEedodQYVA84xg1WokW2HWaiSrMN16OrTiDcgJ9Q8sa\ngwbLFUxZaj8/zVwXvQpd1X1PtphGXJDLJ+uyCsCZOhfWBPDOoh9Gs/0tc+BX\nh3fqgBMs6EmP1yI0+BmdNJ+7idt/8kBoBBTqgJ7/RTL0kbkq4pNAhBA6G39k\npp0nBFJ/BUelljDZFg3r858goZb4aYC4qTm4ub84qCJNOZjx2fw5Jg/7Vl6+\nSFXPo89QFv15GTeAqxc11UzCnosvXfbCnGUz7ZEo/SneaT9ABkAh5LGOSLmh\n6GYFRmuACYY4Vpc+rLJE4qWC9y+aqwYF5hTFkH075uG6xOwbTFJaWJJCt6Pg\n7ST4Ms5JZf8sZOJdF6h8qOY4GElYlUxdpqL42QB9hWSmHlOzaVtBCDc+rIbG\nCjdLqJQJ7JWDCUEb0WtzhNVJDVvcV5Ugpq3VI1HfAE7mfLGUtI999/a1CVPf\nSid9aKZhXjyRduXHzEfaqZDtmKVdHTg4IIclxpGZV302bdiaoKPOZQ3GbbuQ\nVcVTyoYdUYEUnaw6aXy74t7DSUhHxGCIVaKT/Djalm+ecpu0A6pjDFMNCMlM\n0IvMBIfkZcMs0p9ZRZ+uzEmHXM6n4xjIhKFmk/y2FHPIXLFCRU2sN0H0tMRm\nUPzp\r\n=HvmZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyu3Kf6Y96jDSccxFMqM8tA8TQLspsMZC1QPCkkyx++AiAQzHkutRc3hQVfz2Cb3n2Dr7z9iflw/MCrcx8WptRpow=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.2_1570070947575_0.8445526680755195"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc.12":{"name":"@wework/react-floormap","version":"1.2.1-rc.12","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.1-rc.12+297d86b","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"297d86b9f022d3ddbb8251a5bfea6c61e00e5942","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.1-rc.12","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-NihAxjQy3OLECAzgDB5tEY84GddD0q6PGdfljVonP0PjeMrUnGK/vOtIvLOdH3rscwIuX7QlZDMMBrZzUCNnNw==","shasum":"27711986aaabc40456c136bad66a23f76dd3a0b5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.1-rc.12.tgz","fileCount":17,"unpackedSize":65638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnDHACRA9TVsSAnZWagAAzqgP/RidefwkB7adoxJ+xnWM\nUvEcIT7FJRFVksaoMnEc7PS5yO4k+dplzoPHIdE3DhCYkVRVYkDHZ/y8Nq/U\nt38ac36a5TNCVtp/cgPTQL4dq/csMTCzQF24N5RguSwzgBjdwpKOyogPfHMH\nx4fyvi4kBEOPuffO+ENwk8DIbN/MlSDOdjEb640v4V6uSMjTpXI7GGu0O+9K\n5aspVOBxfe+1sAKkSrFAp1NAuB/Z+5SMuTyE2YnsF7KEBDcbLevWoVIrR9KK\nalXyCVxAX2lUU+plLSptqFtDm9ezvwPLw6YsSloH4H4mAleP+aes/xkyl/BQ\nWfQj3m1+Cr3sRPKh7ATaK7ywQTd8Z02C5J0ByfWYHMZlKxNAao/IcKZ4itFj\nmbQQIQqbHEY+uoEkaJ7qmm7Z00BFniaYB62MOq5uwuxkD4wFoCZYH5Xmx49p\n2U/9vnkH/2gDdwVqbHSo7NatHgGc4KmfRAtVuGZdvyJ4Vug6OR6LqI8tjqMH\nlStC0bjTV3/zIDk5SP0l/Lk1GrahSKYgt6GGjnYHFSWPJBv5oODB7LbCMQSB\nTvkrXZ0lIS+Lbk70ZCkEkUzhATxg0rTcJJALyFzRehKfFzSfCZXbjY6/unR+\nhO3fCbTEVjRbe6JTtXsRgNA8zyl48wr7SQk+6/JYQq80wKAN3CvtsXAWaWkI\nBWxW\r\n=K+74\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD51ZkyFZbMnZs5ceMMhZ1V1fkLeDDrNzgqDb+AvVRN4wIhAKuvwGNDbBWRd6eMYALqm/gpicGyCqllLbKIoM1oZ+Jk"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.1-rc.12_1570517439382_0.20182787462274154"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-rc.3":{"name":"@wework/react-floormap","version":"1.2.3-rc.3","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.3-rc.3+4be4934","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"4be4934ea0493f5f4e304ac41d7ac4734ae4b91f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.3-rc.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-94aqHoVQ5VxPefAv9ngIJQYIF41GWwBpi2/gd2xc7vwsqvvTJvidUiWTPgJdp30juAXWxvCnbYTYPu0FYt57Kw==","shasum":"fbb5bc5f2a03cc5712e91ee9e2c852a0da7d4a79","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.3-rc.3.tgz","fileCount":17,"unpackedSize":65636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnGgsCRA9TVsSAnZWagAAQ8MP/2nuqJY+5xFiv5EAyeuY\nJK1W1bA3sZ8xudjyO6RQLQoynCUmwPsAOtcjhKqiuX3U34ggEPOX2xkawSEU\nNdefE1dxnP0wsNLEXtb9aPgAufk+3kS/wu/dcgxYMXnxK0yQC/pekRSF6Q9f\n1PcRBjSxSyeQyKAZ8AEFg8pm3Shvo3dDdXMAiZzrbOX3w/DZB7gc5T2UmL/C\nmg/8dsETns596CAAQdB6o2nI8kXF5tzLRbc36V7+CskikiBESrpbnl8m3XsC\nz95cXpowC+tR+akj3Q22vFkvgKHZtJ5wpqMsXEtIg9i1Dz4vP9B6AztQkKDZ\nCCLAqOSZGFC2+ld1GZOoYiaq6SWgtiNUA3cb9LrIT3gVcL0hmjBNDfq3u4WK\nGyyF/4E+VbLWZGvo0BCGFY2xTfQk5RkmcJkvi/Dc72+vLLotmN1zSTwH1d4y\n1r3CpAjmrfE8XtAkcDhZh1gPIgLeiBocX9oQmAf27E7ZLNC5g2fu/r+YpALH\noI35BFQNORYcd1REa5OzfJOyFedQeBsxgBH5wTeAf2nFcg5eqISSZWXb+wm0\nRn8uwQYg6ToJkC7VDaIqotuCxWqjR0GX4CEnOj/FZQjQFoNl7AWji2sqbtvN\nymQkRAAue7WAXHTucbp51WuFcQkg6T4ZvOsUCG1GWAINLrMYDdZ1qQb/XWb9\nrkhc\r\n=1tV4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3qXfVL8fxx0R+G1ctJm2/pQlAIlgcLFt4vD78bLY/GwIhAJFrPzpSHKhUNGW271xgmL39FDQsIsxWgucVB8j4C4r1"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.3-rc.3_1570531364386_0.8471744798621315"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3":{"name":"@wework/react-floormap","version":"1.2.3","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"b0a376ca910db53ce74973a8e5af2ae235c3ab18","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Lf2wIOo4nyzGGEjfJUlqSEq/2QFi7AJRQ1Ic+wrs2L58zoJqnvCGOiZ8TxOJsQ1/gaYvnD0K2CjTPjK2HOcrgw==","shasum":"398c5743c71f1b3c4d6ae5c078c906e8186efd0f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.3.tgz","fileCount":17,"unpackedSize":65819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnGiGCRA9TVsSAnZWagAAVk8P/i1OAECEg5iTd0zsOqyy\neCC5bjg3mZCPpxEe+kuUBFh8BMrAMqkSzDRxp8wLs5ge8QxVrr6nl3JlyefL\nkTmujcHPEOuJm74wmFQIqrqFGQoqxwJuUCCWTNXmNxKePwaUD25lSmr7o+nC\ncu/IHbXW8Z6GkFHEqitdM4spnVLw5v/O9sNcXq2jVjmIyPkX3wn6UiKn48/6\nUnRS9uHSnag83vbDBMHmlydY/2YQm3833HJs0euXKve4Ig4mSFfVndMA8z6i\nDUP1O8D7v78tVPoJ1TmnA9Vw4V1zupO72g1679EtCW1+kEOxeGZyr3cQ2G6T\nthlQk2yxDsR3t+R5cBWCYskO6iR6GyS5xNvVH1dAKgBnsoT1idlljNSPBb33\n7hqEBZ8Z5iz6ExANj4oPfQ13o2KNFmpBGExGCyvbFeC4QapYYwSWdTf7DY6t\nFs9QRm2IY/exHU96NdIJfXWBpDAev/2d00MXrmbpj/5Nt+hMJT+GlsNWop4U\nmmOmn9KAZVfxh6L37O+8KE1o9MyQSJn7kjnuGXCnZi5uM5Wyr8L7ACkh4Y2M\nIPHFryDMrSSpkdugiVpN49UvxgLmC3msz1RjPAmhjZp6E3ileNSTuuJ/ZQ5Q\nrjCk0BhwLEp88+AAEr2B1dAjHrwIs2z6sJhvtZFtnS41s5uqZavxXd8m/Qzc\nvdzh\r\n=y9go\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuQfhyJt1OIunF48eqXFMtJ6x+dWLdQChnZXKiBt+j7gIgAlHXgtf8Z0JCfStHggG93lzOwiEw2XjgJWQ5Ffsu8rU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.3_1570531461977_0.2079531554270062"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-rc.2":{"name":"@wework/react-floormap","version":"1.2.3-rc.2","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.3-rc.2+2d895a1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"2d895a1c3c0a1aa9d3923adee0115b0412cd92d1","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.3-rc.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-7Kw1rTw6HJydewOY9UwJf2Gakv03TlwiBqBBWkpN+qgaeIUbXZk8yb1QIZqFtWLZgy0QklYbk2wIjAGeNPAIow==","shasum":"ceff24967a9f792fe6d13a58e15e968d3ae0a029","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.3-rc.2.tgz","fileCount":17,"unpackedSize":65636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnGiaCRA9TVsSAnZWagAA+TMP/jsdqknZfQ55Vs36CYxq\nKxYtHWXxNWtBwz0TEG2pHrd+6qdBc1LfH+5T614gcRzHAHWTsikVRBy3DWQi\nXJpxsz51uTp6FbGJV0/YxJFzVGbCKysAPObWb3tnXzXymXmeKHWHLdiqFBRW\nkb/inYHbhcpeZvXgEp8i3UoMTb+jzOnkdUT2ZBLoYfHughgy40L8aq4W8GBs\nkm1VP9uIO5SbGyM+9mP3AsNdIacbBsIVI3gJlWI6gm/oLTJWoIrMwOsBH/3R\n95w86Ix9vOFYB0rADUyWQ1QINtFyFS/V8GVZGo7yXgL7zz0sxz9eVZdVudbi\n9Rk+oBIyHovSIF9qtVo58WBVlHoxDBQAVHDXI1KFKhXMJPNMnawsl3TRHTRM\nZO74keCCHvDV+QUVDt9CBJDlP5AMWAktsiclxbxBu176K8cWOGEopzEtWr7Y\nUTLsgO/ZaIx85RbUU5SjKtseD/gKGkinJxbPG83GMxE0Hru6CAGtCRaNOhG4\nLJKes/p9QDi8jabsh2Oar5rG9LHoD1Pmxxg607kCgw5/ZbhORlga5d8KVEdn\n5oN+g4jrjdZXeusbKAYl2WorlrTDs/6vkGjD6Xvbm11PfD5NaqFoc5SNyqEG\nfSjcjPVACY3/bhhAiYqXNL5XXvHvsF7Z/sAEr/tAxC9mRsfQuHL39rowVQW8\na7WI\r\n=49WW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEc9zBFfF4DlH6Q9ZKCRM0nTP+3NTpW4ec83U/fob1wAiEAj6Xekj4foh3yZJjdpyaFkNl2//m4MuT+H8fpf8mNE+w="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.3-rc.2_1570531481506_0.01090472260192965"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-rc.0":{"name":"@wework/react-floormap","version":"1.2.4-rc.0","main":"./lib/index.js","module":"es/index.js","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --copy-files","build:es":"babel src --out-dir es --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.4-rc.0+115c0a9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"115c0a9f5843d5dc077011bd2abb0a111e2e0f1e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.4-rc.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-/Err7uML5T90P5IW0RoxqeSrIQRV0mfrUY4xmgJwlD2eqkD/8JguFUPNNv/GX2MmHxX6vMqfU3glxsMBzziagQ==","shasum":"9d30780ac5adb9bd9567eee0b191797317e63bd0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.4-rc.0.tgz","fileCount":17,"unpackedSize":65845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrXE3CRA9TVsSAnZWagAAE78P/j761+WjHFx5+nQg9br4\naTc9a25eQRRwo+PKKQZiVvvITMsVURFk25YSkco65GbA+Fd2/m3N8oGRrB13\nWVXVeCjqK8IXE9RORkM5GbOBkJ8/+xJ/xeqW9fy0U3UuYKucU6QKRw2Z8ECg\nb36xs2jrTHLN675yn3MP5MnAG+QL3jMJWfMS7fOWjkCMA6uChtr5HBaUP4tR\n5Zqiv2YAPryb7I3Qaf7E9qphsa0GOA1LVF+V8u5TV1XYP86DTrIUFmj5kCgh\n6xOkb5tHalxXHZoJXWd0K1iG9yY4bBw11PLroAYDsnohEmGjKxs2w8jDAVO+\nkrivV1RxIyMj4KF3FY5NlKhFeJ/nnMhHCYzFqACZsZ1ifT3wweHlywuxY72k\nI8ci7ZRKQOHRTBJOld3weGu2aUCKLPlwXqHmCtF1mqbH6mstw540COBk3ngK\noQdW0B+Ty0Nz8Y9GLGychpEXYD4HuTbAd81q/gwXTOR1mFKhDQOjojcjD/zW\nJSZ2HOQ/7zFvi7Pp81phH7XtBJCe2uHVjFqaVEIZgK4eiiOn6uourjn25t+J\nTO3yJja47raR2S0zFyaslPSO6/zmhpyvFLmEePjLFc+6ATdIjwmfcr81/bMA\nHWaXVJmf33EHi+DSa8y0r1mMDuhu1l6x6lKOn0rg46a/LwK7QHXTUkpo1gY3\nWrcR\r\n=V3jK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ2bHj9gxw99UIcFyJtQH1o3kBhxV7nkcXgfr6M0pcuQIhAOmBY84Zxnfsx92NBC0LpSmYxYM49ESv1tdhsrPa06dM"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.4-rc.0_1571647798737_0.4154666310521482"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-rc.1":{"name":"@wework/react-floormap","version":"1.2.4-rc.1","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.4-rc.1+73f7f97","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"73f7f977f304f534b12de773c5908cc2d1bdcd13","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.4-rc.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-DWX7VVU2GMYhsS7fnwJHhBMIpl3XiLXnP+FRr0lw3ZqKDsU94sjbYT90gYwXj4dcaIuAMHdu84eLLaOFz/V2gA==","shasum":"78941f2a6da940a02630ac51ba7d058d48cddf20","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.4-rc.1.tgz","fileCount":19,"unpackedSize":62728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrpHoCRA9TVsSAnZWagAAhgwQAJO08y9R4nLVuQv9lbpg\nyofcP1+mRt8k7Oru0SWL0WvEFjdlvabgQpulEbL+/xQv3MPqcN5Uvz8w+nmx\nfMhbU3jFTGryZ3oHNu1UuY1KvoBw0r45Hx7vYLMn5lk1QCUrhZSQlnD1127B\nwVKQXiV1uRtUMIAC2O2hTCWqWX6I0yIgKv/Z7d7+bLGeGY/2XQdECsnvxr6G\nGqhIJPPVd0zBRYdb+rHh2Hkwc++L+g5FocsBPuidxXXakwRxYl2VVLUEDdgD\ngMDs0vz/ZU+mHT6yaACAwvegn/x2qNOU568JQ7wmJZxgsQnvQDc8Z078Q436\n967ZU3V5OgYEXZ9bBTssrlHbJpUPa1BfuYFUXlpMHBNAx4HeVOWnv/5uYkks\nrI7lvJSK+r8Zq/3myw+adVJQw+wEgJ5Vdamgs0twBnSKwW5q/bvOJsf/l1Yf\nf1hPwOPb4OtFvTZL2pi+GGo6T876qajXMcjCHb2Th0uWZvUp6PHtJrKdX4KK\ncGyPcULDDP9Wzqfie4c8wgtoUAr4OzG9KhWDEqLxul/ImeOtLH3KHO4tgoE7\n4i9MtEG8UWKW6HueKdYvxA2TVyfPyP/khNzpInJo82fGhbaaven02Vx2mFI4\nOUg8WkFsOjbY1aGdrK5milHwEqCYtiGKDD3q7HEyREIKUya5ns2ymKaieWEW\niBKh\r\n=SpMi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCawMCyTK92PpZ+zRRWtNTe4Vk4cECkwyckg4eFA6KDmwIgQSNLR82d+MI87vU+o8BEeY5MDHGcOa5zsopGYWxvvAY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.4-rc.1_1571721703381_0.4511794800640272"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-rc.5":{"name":"@wework/react-floormap","version":"1.2.4-rc.5","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"5b16d3fa416eac3622993f3d79f520f333dd02e3","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.4-rc.5","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-357sbDks1qwbZmjqQXJjZfi7T+trSJjNs1eUykE9qe5XaNzdPJlvbGfoQNX4GsqAxuhq8A2qisRXor6Ilvp23Q==","shasum":"f315c33e073f3f82a6427324c50fecd7a298a596","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.4-rc.5.tgz","fileCount":19,"unpackedSize":66237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduAq8CRA9TVsSAnZWagAA9DoQAIHEpxloXgfC8Q0qiG0I\nJPlRX6G9Lbprb6H40hUG4fAvnHrW4b+0HYyMbvofnSrlmP/AT2LnG+THKIFg\nKD9V3bIPiNpDlddQ284Vvg2DMC6ztEWxeuAXxXC4VKCwN4luwqPP4Oy3PTs7\nyBCVbl6Bz6+JHXbuRSVTVCc//GcyocqPABBtayVFFWmf8/2wTR2h7EeUILBq\nIUeZ4ktjbfnQkaLD2AkUEFiNUi92/Jj6WVYYeq3OZ9Q/0xpU3GzeKur8g8GK\nlDT/5Y16xYxEhItcLe7Hvx6KCSz+Ei7Gx7S1BS+RX2F0vwZqIILV/gOF9oPZ\nqNX6KuDMHvDOXx6m2aXyVo1KSqb9w7mpqjJUcWzHJoHqZjrxmzDf9J/xyIyO\nvODjo8APQcxOgqyNmxuVB5TzRaAghj6xQFT2SJdXsIdC7YYU9+DvWBsniQ51\nat+ToXnGQq0wC9lTWlu2uDOYcVh4/poQVo4rJFHlpxY1ijkC99sTZjjTV8dl\ne3xUvLCqJ88Jt+MM4tGyYDWnMNNjydNlLwayS3vUcg25nAPUWFb1wrJOxBU4\nCRo8H7tX1TD/31pl12Y89BLAgEI5tillps+ex5YrqUdi4w9HkCIvdn3bZmpl\nw1WjDzHlTzQ5ecigv//qxra+kZk7uHOAACLjAwumMOJ1VscufHCt+bdIBz/g\n+0t7\r\n=Y3jG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYVRYpKjPk7+MrOAmduiE7Ec7uFj2ZZcM0ff+y62Jk2wIgYZScSJyOZB/adblqkWYR0GMA1eG7wEZ8bPxqgIarIVU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.4-rc.5_1572342460214_0.1684401241757536"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4":{"name":"@wework/react-floormap","version":"1.2.4","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.4.4","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^4.1.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"5b6bb73e6e00021a1b508798efaccafc02af2ed4","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-c28yXZVYsi+NM3BsZChydVzoe8SoDZtV+F0D9EVsAIH9ilHBDhb9nE2fcVetI+lX4iw/67+UATPQxCxloCd8ew==","shasum":"b79e5f372c9a3e2f87d0619291afa9289bcda18f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.4.tgz","fileCount":19,"unpackedSize":66574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduTQ/CRA9TVsSAnZWagAAyfUP/A5vBqvbIUgdwwcUHsTT\nkNOFkjogCbbyofh3gyqlghQlPuNxrazYIDzKFTXeN4ov4Zvqbz/bhY+h9l7k\n4weBd+ruBYgQAMw2YLoDeNWj8Zj94elb6kdxHmkLmp6P8CYIlH70kkEUPboG\nru/C0CDva5C2LvwJKf0ELISmSP8caN+x2JmhmUljQoIOzqCOi4QY9Ghrg2q5\nSBj49AX2/I7nwmc3OHt3OVzyqpkpt2ouuFjF8zHo62UMsm+LDQ042M8IaPgn\n2p3+KqNZr8oaUbsFP9U/y5ukoizM+bUa5WQeXHFWrsyBdTeFNx/6Sr2VCTVi\n+GXMeRGSxMH6mSo6Me9iAJ0OktFKghUJM+ai6rmNWUeaZtAzKb/ibpstoBvs\nsW2gwK7k8VMqfFincrZhnnIi7oTvZ5cn/LgEtqRMZPTOJzUxGJJVjGOXh+Wm\nWj9Zr29tc3RG3nDpDs/jxZuSR71UksbSVFLXQ/BEvHt9RPhVgxq7HqN+j5hq\n3zCJbCs3c1zkdmbiEOE6XZEcE0dYrN43/7TAfYYwUVHZCuzwaJHgHGaBiE5i\ninnFwS9IPbX59dYcKdn2LJbtsA3v4s4lYFGwZ2lftiuCFk1mgEVmCpNnSH73\nDOUh323nwcvfJ1te3vtVJn2r1elyu0VpeNDhyYiowHEEZVgeInAHCC18i+Du\nw+o1\r\n=5GDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaKNat+M8wEAuHfE82mn+PEhGE8hvVj8ZbItr4HoDpiwIgQrZB3m8zMZDcgacVutDqO4yPnQpS3psHyZUvva2i58c="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.4_1572418623354_0.3217742180920027"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.0":{"name":"@wework/react-floormap","version":"1.3.0","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.5.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"753661b0b313ef1a4700298d1dbff69521c2818e","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.3.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-C/TPfdwnq0OXcvYwHNUsj9zmD9COzqpdL0R49+dbC6Z7thF8usQIfA4RKJz5AhLd2h0poitjgaidR6RXUbTk2w==","shasum":"12a07a09f53a2f9e4e23b3ed4c82f46b65ba4a70","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.3.0.tgz","fileCount":19,"unpackedSize":66948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdv/TBCRA9TVsSAnZWagAAbSEQAKT+QdfOqTLN59yZhrBK\nzE6jsBnd8jvw9Jkb4IVsIgEuxzRHtuACE5vZh7hkSunz/2RcArzo7xDFEpbV\n1DkZSY44iS6AGXymNS3VQhtD/6lr17Ibnqoh1sV7SPb1g6EMUTgxTZpNghPK\n+8wGG3bw97jm+2dgABAxk6ncS77Ix0rLqn3zhrVOsb4xp6E7AcuDOASC4MEa\neOujiAwhxccnGDTKzgKnfI3d/xaJih3JFwW0OyhFh4kmh7RJr6tchjc/Ntnw\nAyLglGDYM6U7oTKlAE1l0m1YFD62BxuivUiIboHBvE68S6R8Y+xGL40YdKYk\nbCGgqB0IYXgIBdB65BPzOlrzwHbXhFjCeZ4T+zV3ZPIWCeqpkF6LZ5lpAV+A\nWz1mz7MbpnyU2HtoPldtZS59i3KGR+IBUIblW+W0rwU0HQ3XQeQizdy4deFZ\ngXOv5AzDVt6Gjfhi9euJmajBr5cjWbqshWz34kAg6wyrxNkuqpBB3WTNQ6Dv\nAEBQuYzQ83xi1nqKT5g2k1qedE7tHFHucEAmw75n6r3f1md/x1WdWRy3yjar\n+Az6nbeYPjJ56bh6Q1EOal+KvzhmeDa6D7xsfMe2YJ1oTqqzV87R5gK7x3ma\n2Vw5n339L+GoJM45OaVnz16VuVyIZZqYl1arTKWxWoXjr3cRhRDhJdsMxNeB\ny82w\r\n=ubvM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDM6Sxr3WcBjhbtqdQiuV1IE0UG25vE0CjT/Op0pEOAtAiEA/CnsgoPw/S5nDPzCjjYshICiNyOlW257RlOQ3z2fJGI="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.3.0_1572861120636_0.6872891261964789"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.8":{"name":"@wework/react-floormap","version":"1.3.1-rc.8","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.5.1-rc.8+c24fd9d","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"c24fd9d3ef4b4e79ecb162ee69e889e50d2699fc","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.3.1-rc.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Z6VWz0oxEE+BM8+nSHKR9URGQhqMNCOrI6Qh5vOl8FxYBhErKTL0fLQfPJKQW9Ii6hct0IYdVTfVcnfSWTeKxQ==","shasum":"7e32f9d4d11f6d94b6dd9ce3f84a230172e3a67b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.3.1-rc.8.tgz","fileCount":19,"unpackedSize":64676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy7t5CRA9TVsSAnZWagAAkeAQAIzeWiHBdbWbLujKGZSQ\nAsh4yqwQ8QJNNxlYVRC5jk7q2+og2OUd84Wlscc9ZdblcMMn/7xDeV8N2K4c\nnJxAAozqRnZoO7G8LaeiIKkKx5p5RpRsetMPTlffQYbfOd0J5oVpmU7QroHP\nH3CnMyIi4LULyW9T3tV1frAqG98Ky7YR4RE9chMN+4O1nE+exsfWfVOKYuP6\nCC7kNlKr+nUcRtdgRz4+nPwWJ597CJfPsrIDcjojuPNBuz97GPnoN2MxX+mf\n8fiEPpJ0KgL3xjEn5H+WD8f6s0x0hT1jwNmd7EfHCAWMLn+jml2WZ7g/um7L\nstGIviqUvNOWgtjHE/6vNcE/nA8GDiGYAVQAmjSyxNrpMMliKLNK5+C1TGWF\n9z4PE3yGX2rajEEjzZ9ApoYAvE9jAZzIK5XCyRswmjCstb0j5A8JkZLoXdRH\n0KQbmnjj4fpu5NivZJraxDKnYWj7j0a/bYiPOYHx5sEksAHubqBo+GCEVGCH\nCYGo708tq+cuaL1KGVs7S7h7So8Kx7mh57em33mmYxaNmLgL1KYMGkTSPl9O\n2CJhr0d5S219OgqF9N3iqCG31RyaahbVR0oRihplMzpX7i2n/+vkXXML2klu\nUe2awzT0ppba8dDW99yY/uQt5KPwQLphEigoOAdEhshG1PIl1Hdowsmls5Xk\nFcZH\r\n=JVMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfJCu2Gtf4qh686h55i67wBTybSVhn9yAbYYmTtDw/SAiAy5AYGzAGz8tfgHLnMFaeuGO/jvfZfpwHTtW+zlqkVLg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.3.1-rc.8_1573632889457_0.3288833530443753"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.9":{"name":"@wework/react-floormap","version":"1.3.1-rc.9","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.5.1-rc.9+1c0a60b","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"1c0a60b649e94c5f880187ce4b4528ae92b862d7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.3.1-rc.9","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ECIae8V/B1AZibKloxNFQrfwtq5j9RDwMCma9fy5MJ4sKjcrHYNzs5+V/B6rx1u3+t8gY25r6Xq3wHNvbw6cow==","shasum":"69a28d4e4728036b61fa0ba351f8718ab91cd46b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.3.1-rc.9.tgz","fileCount":19,"unpackedSize":64676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy7+FCRA9TVsSAnZWagAA5OkQAIMSyM8nFzFhxzJV/oIG\nPbPsFozkr9RHCtCNtc1NZXPGlRUhG+A7xMK1rStwBfQOIwk9///WGkUlyRuW\n+D3pbl/zV8Y5XY+ybSITNcMdlW7I6EPUsuJ9JsZNme7yh7+aql6f6CCKOi/E\nyh1CXFIx6gz2VghFrYobC7+Wlq4tDqLJPpu+H2Teg6lUOWEMSv5EX2Vz7+s2\niAazD8k8Fjo7jzLXCj+mBKnawrcNHhQaL9obtpXVDHN4C6WlfGUO3zHyilkC\n1JGVvAqVljzFXoopt5jkJqNI3oC4Oj2VMOhcRw9WQ7RjhQWZGaVxfwy/9PoH\nFiQSnc++gminHN9w2DBFoT4hlTm/te/LJ6KLRBavj10WL06oFv6n8F9UCMSI\nsQC3+DPqzlNG7T7oYS3C/hwdYPNh8vq+IwS4fAcC42IOS8+2Y9cNNuJoy1HL\nIycsC2XwvzYT+/VWFo3cGLO/jZvJMGPFmJy/kk2AS0KEQ7J/HLivk3XSRY23\nbb0JbeG8uKkwxBRT+eQF6BoswB5q+k/hCuf0q5FEnhxedrQqVB6qd4LzzRb1\njhd0Oa1NxhENsFr1Vw2eKGbV9CLZGQY3rVODE8a6LRD2hfXnBjxX+qpX9BAw\n8PfH0GkIc52XQqUVmvqmpIp3ElQbuZtdI/bunWcq5nzWrSj+Y8etPf9O1HPq\nRPVN\r\n=AJCp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGFfrirRr/UhNI+T7c7XuyJeOZycP6uaDnHau2C/0t5gIgF4XYCbjVU1/RBqQmhM8TkWj1gRW0W8PcZUNSdbOuwdA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.3.1-rc.9_1573633925101_0.8351624708479979"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.10":{"name":"@wework/react-floormap","version":"1.3.1-rc.10","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.5.1-rc.10+07dbfd3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"07dbfd3d990402475f3a6e711eed46d54bd86681","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.3.1-rc.10","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-H98sL4nE11GiDv8AlFdRRZcVlnRv83HUrBLRNHYyrS5jUo1gU2TogTpdlVsQydhnWUgXw0tV3+dl+PVqfIYxSg==","shasum":"165bac4ed1291a503405212c98591dd24814a94f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.3.1-rc.10.tgz","fileCount":19,"unpackedSize":64678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy8BpCRA9TVsSAnZWagAAoiAQAJ85kedVk4/a3NiE8y2Z\npVJtNrKAiSpLBpsrU6Lzw0sxn17tp5aZPN+5fnAeZtFrpt9Ki0GQwZ16zId8\nfATHoJ3Y5G/cO7FeOON47oMxJ5F3Aj+oIiJ4tv+w3akOA6fOJd/dvCcAI/ga\n8lMQatHjc+0V+uGamNwjaXpbE2B6+FMMuNU7l3Kq9L+mFM/g8oT9z/TrO4hk\nmmblXqKNbpzxsDLBy5BI3erF/Hqc1jmEdioUerfy6wXWoeBi5L+y2XV9//uK\nvgx4DfXJWd/l6oI35gYX0V9LsqdPxRLa3RQN68yHagXK0MgehMnTDQkq2/YQ\n/v2fGpkwb5HWhYj87Oiz0MJJT0TYj8WhjQ3XOLkk5I6XN3wc9uAe1YWCL5ek\nv3xpR2HLhzdNe2VKxSnkCLCBADMiViUQKmsYwCkWY8vzF+91qEyE3EJuo6Ms\n6RGmdz4xYj28Rn/bTzGCQF3AkF4PVJZUkz87TCN5UcQPiUUUDJ+6V7fLxlW1\nmF1bI8B9SMP19CAupIZIbWD1MRWBpAMaS/3vUbEbCCY6elJ7a2b7XrBT8IAl\npIZhr9kcgjMOjRefrV2Gx1g7BfneD9eVVOU9wlOMORhgwaiAkXDNd+XllOj1\nCmH9piIf4ismaDGvufkHalOXRAlAN3VY2URiK+IXCNnsXcncT1mSpB9zEvKq\niwjm\r\n=8cQW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSkcmooqygQAuErAzMndIRYvSTTXBUKpW+KL99ScTMlAIhAKJaJAH00fPatgCUL3Ci7v4QCkxLSw7rIqaak75d8NWZ"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.3.1-rc.10_1573634153340_0.052929548910206625"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.0":{"name":"@wework/react-floormap","version":"1.4.0","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"3ae03a62e602626d147e296007944c5a8ee03869","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-uSGgt8tLeWza2c8wqcOuUlbM7a813NFO/KxMNHplc62dLDsV1mjfUsrNzoRPF69TBlz/SuZtdLldjUUSXrmn1g==","shasum":"fbd94f010c1673c5f069f790f5ae8b8e27464de3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.0.tgz","fileCount":19,"unpackedSize":65040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy9SBCRA9TVsSAnZWagAAKB8P/iz4+EWUQJmLfxbvZ59c\nEoCs/CZoli0eTZq+9qL714flP0Z39pi4g8w/ebCU5vlAiI9+FKrTe8muM3Pj\nz4GXJYjEI1k3+C24yJJSkoF28URufyJPcH11155k0ccNIhqC1KzXxHU/6cox\nRtqec4AerST4lTJliqZHzSCcA7pwaNX3vpy5rtC2Tj9fPRWSsAG8N/ymGShS\nPFIgwbXSRsczZYRCCiXciSFW/uIb2NuKeV39F8fordFwoV545weOYJWeJqF6\n4qISZ8XEzizgPaNCACjKTNHuJHXiQR+KGE4D0PadpP/r4ZVx2vR8Hbq3h3Ze\nSBebWRV/qJiEJG+COnEklh9xcIJnvktS98wTdTSi4Kt1pAPNsRc6qFIDbO3Y\no8BBGUAXzRkSqEUvY79UpdHVj4p0jjJiSCWy3xD2lImcqEfbDbykVF2DPBPA\nHcO2DGvdgBXsxUbhVjDjvEc5ar7wRnO0br0vqm++k1raMToZeaFIu0YZ+ldj\na8XYbDgC6WDtWWn0duVXLPsoUPCMfwVRd7X2AMdG8PpcyxeHBm5U/s+Qd6Nt\nscXQqMuRl1Zah77NUEqWKvXthXwO6hKj2GO1s9pZVvOtAmjL8CsiKif+2yAu\nnaqJbWAtKue954a4IpT8mkba0BL+OlaUTKr5T/ZzeFQwj0qAVTDlb/5vjTc6\nBzQE\r\n=rXjj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApxu2/p7qB7l7q50iQ7sf+zFLqXIawrRjjHdE2ZL9TNAiAf0f0G0zy+5JFQGbN4qKKoN2KKdC8/IexacYYW2D/f+g=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.0_1573639297302_0.7905812689825729"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-tsdx.11":{"name":"@wework/react-floormap","version":"1.2.4-tsdx.11","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"prebuild":"npm run clean","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz","dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@wework/floormap-sdk":"1.4.4-tsdx.11+783a0b9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@types/react":"^16.9.11","concurrently":"^5.0.0","cross-env":"^5.2.0","csstype":"^2.6.7","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3","tsdx":"^0.11.0","tslib":"^1.10.0"},"gitHead":"783a0b975ca7ef68617ac34fa5ae9d25da3e6514","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.4-tsdx.11","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-5dWfJqCxuGx5gTfOEQ8xTLjKXHRUG+MS/CELbjDEdQ941i2rVOBEB4TWk0xj3vl+TX9cehhG619qjvPjmlMUww==","shasum":"c58761a4a2b840fc2fc0742927d8ff528257f0ee","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.4-tsdx.11.tgz","fileCount":15,"unpackedSize":223605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd13vnCRA9TVsSAnZWagAASHEP/R6Uc1arOtUe4BTz6AMQ\nowg0CMcH41tAe5ofOLN2YfrmXDCrwfd+k8Q6NEMrifVGcjpxeT768teJB4Pf\nnB9cPiyJ6VsyI81mOnu/nKnm82S4eXKhpve449wAQ/OLfHurs5dhLW67fnkT\nbAN8ymE/JPMjtcwmveytoHCYT6GV0lfbxpYPWgwodGqBTiggJ2M7lMjjOIFd\nUgrAgPd1lYbqdd41JxR2mAK3HfOIXROyYucqAqNZqXfvUa0xGdBBMxu1+OzX\nklPOWZKhQ5lqsFD6zxz2SRVcnE9o65WKQasMzyv+Gz6bexBnTTtiRjHNudM4\n0wQUutW6MZSMhS7KS5cUV2qlors927HCvwTOp3JKWqm2K3j9T/073yIQsxb7\nG1qRsdyV6/UNlWdO1XetxhscHVYr2dDrDX4S4Y6y73moO6BBu4A252Yz+fHq\nRAZRIrbIdAWojebCzUOeFjyykEB3dSci/Q0NRJbb3NW3XxGJSEhC2KqYX6D/\nJWSgy2E99hFnm+O3Kq0bJZltMZpb+gidTYHVgzDDHwQLsbQf95NoE85wH10e\nuL3Pzqmzg+kMlTBTBXpeSMBpcS+G/qqtPRdj6HJXFThTrnSllAd+OU+yAcaw\nQ2fpx4isM/1GL4FySC0ff9SZD1lMKOJhH400gy2rjCaLu9/pHCbsFeHXNUZ0\n3fUp\r\n=IjTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHq4d/Y361Dk2ldWFhD4Qn12uIVTLs6GbOYSCNf3dAHbAiEA2iN9TiR/nFWanhC8if56f73y5dh099FLuoEEWUSYdPg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.4-tsdx.11_1574403046084_0.8378704472765404"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-tsdx-2.11":{"name":"@wework/react-floormap","version":"1.2.4-tsdx-2.11","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"prebuild":"npm run clean","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz","dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@wework/floormap-sdk":"1.4.4-tsdx-2.11+783a0b9","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@types/react":"^16.9.11","concurrently":"^5.0.0","cross-env":"^5.2.0","csstype":"^2.6.7","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3","tsdx":"^0.11.0","tslib":"^1.10.0"},"gitHead":"783a0b975ca7ef68617ac34fa5ae9d25da3e6514","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.2.4-tsdx-2.11","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-QX5IGtEM5Av9uHQ3T8/etsBDXQtf1keBA7TY9EniRERM4zo+RdrUOEuqay+gi3w3oanw5XmE4TF6NDil0biT3A==","shasum":"6c1c0aa88af63e375270e75eeee4ff88cf566639","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.2.4-tsdx-2.11.tgz","fileCount":15,"unpackedSize":223609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd15CICRA9TVsSAnZWagAAS34P/0tIVf3KsbLwy2rVgDa4\no81wjYlx4iwZXkc7ipmBGLo1ppyMThHp2g6X63CGqNlxpycZPu5+BL05hY0F\nHFEVo1ZoaBYHi3JUeWeqcLA+Tcks12shRhhgzOqIyqHJkZdfYqNN5GmsfHa8\nR4eYiC/n32uZoe9MI9BVGKuyjzMh3vlRYA/atlOKmbGxzS1VaHM3GbXP/6eY\nLOWFnP7VNO663Gf/CFFgVBz+RssS4XVpKOZ4Wn1hAyxY76TZZ4wq6W5ZkfIJ\nsFwW0OkBLcV8lMuir6mJVL/PP8xGva6bGL60I92nN7SuIqwPxR44IueaCG4J\n4ON4kETyggSdkBOM4ZNWNGb3KdcnEGj2Z8qeDzzeFm+x72V8qfpSxp8Bytb+\n1TjsVYDT8DZNKYAL0iu6Sl+FaYQpGEZd7Jd0QPXSB77m2C7YIIjeeTsTJvy3\nbGm4oWYF4cMCoRRLSwyeRZ1ESY7I3gleejlwzZ7YEJcb01JnbkoR4YnL1WFB\nfMDSRXxmNCUhLrabn+q3Qm/DAJQIReeNSDjc7gpz+ASfuMV5zfK8bryqSf4I\nlYNjkX+Sh06W0jY6LMSzCRSuUlu7NIoqVQAcIPUK9IYLb3zf0Mt9bK5hnviU\nZ/Qo2+uH1mtfz+trdmneL44DpXY8jSzcZVFIOqsvhunm6w+5r7RmZm30Iwn4\nLQgZ\r\n=U+Tg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1YJWDVB4V1eNnPxvjBdst4hdmoFfewOHDjUjcI4+YVgIhANPnCtOqtNEcQPCRw0INUC6rQxUBy7hoL6ryBZm/qruP"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.2.4-tsdx-2.11_1574408327987_0.01603778295445757"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1-tsdx-2.8":{"name":"@wework/react-floormap","version":"1.4.1-tsdx-2.8","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"prebuild":"npm run clean","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz","dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@wework/floormap-sdk":"1.6.1-tsdx-2.8+3e319e8","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"@types/react":"^16.9.11","concurrently":"^5.0.0","cross-env":"^5.2.0","csstype":"^2.6.7","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3","tsdx":"^0.11.0","tslib":"^1.10.0"},"gitHead":"3e319e89aa4a80ff592d8fef3251601a4241d5b6","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.1-tsdx-2.8","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.18.3/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-CqRlLR9oqK0dg2yIWN/MrclAbTJHjQlLxpxKF57vw1VcsKcKyNtW/Wuul+iqFEI4b4iWwbQWU8N2WPlQyg0Lxg==","shasum":"fd05eaf4a6254fad44164b696049073f9021b621","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.1-tsdx-2.8.tgz","fileCount":23,"unpackedSize":227140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2z/qCRA9TVsSAnZWagAAn20P/AqaJlirkJpubck7F9GO\ntskHdXNJriiXoW/ITRoWQbUjnVt1hyKeoataNNzIdGokHNWkiGuaKbZb7uWB\nXl7vYfV3bPYyWeEbMr92ME214dgbcPT9+09cwM7a1N/FDJuGeiszI8S2OHvG\n60pqkGezof2Lkpix7P6TfFS/M4qTCGgMc+KV6SJX58FCHKPQ+a6oJo2SmXy8\nlAdjpNv5e9V/rfTTbgmhTflwU3XeTmewosRpRcNEQJcSacl4q06ZYa9QAwh8\nM524xuGMY0Se8omqWac9vzfjE4sp5sZQi4doK+V8fcYIgSa6JtOmzQrmYzlC\ntw0+5yfRz+kwjd9kBzMuQVbacUax8p/BkuMHZxLzah5AJANCWnsVr062xaFG\nelxrmqCRlBXv5ICFSTa3OppK5/6NoqCcw5yMOk3e1Ihsc5PFW/JT7rIW/Qhp\nnP2oBn7CJRdYp5e3WpDd0IuGiryP1whYmmn+wZMhHcACbVwJm48asuUNlLdP\nLNTm7asgsigwG7OT2nkwI7I290ZSuDwsSm+BxrTt2z3nL82rHuZrPZRwpZ2+\nS6KPBaQnsk7rF0/QHKj9mYxrreH9P1y8A7+DgkzODH7eIZ8h6uGlodksDAcJ\nMw1CyHTDG7/4dHv5VKInlUqYVP8ypYaGhqMgfjUNswDyaGEImdnXmF2vCjkD\nlMk7\r\n=UHAs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQBWF6HFyC4jvZE65UZUyUHmSzPd6xGKstxcfldnt58AIgQVn+CXEc1vUpAUz5unNzXri6Gydj599giJUJBDJkpYU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.1-tsdx-2.8_1574649833696_0.26921543445802243"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1-rc.3":{"name":"@wework/react-floormap","version":"1.4.1-rc.3","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commons -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.1-rc.3+e34dabd","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"e34dabd6e6b3eb20155f9af3468d220c8ceb7b6a","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.1-rc.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-vPTHlZt8+QhvMCVWytsiQKe/dq2WX6bV6NARdu5CMupXh+NmHKBuUeB/mBNmrDLcF8mJqA+6FrtHjwjhLIX23Q==","shasum":"e9b396f9d9cbe30601790ef9cf8025c300e219cd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.1-rc.3.tgz","fileCount":17,"unpackedSize":65058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5NZ4CRA9TVsSAnZWagAALTcQAI5tVzpin9SoTh4HuV6W\nC8KPhGI4En684WUZc1OsCoXiSionaJxtTZF6XwTAwChAfaqqEKKkwEPNIdJK\niWSZrGThi5/Zs0b8AWX0jldWYHbZCH5r9VGBWDkWZtNffNdnPJXo0oXhTjMf\nDvQviOsA6p+ujwxvluDeiFeMCsNfj9cBXhiDXNNb9nxE6BnnmegkrowdPqfZ\n0SFsEB8UbhOLntRcA6C77skmTi3biTz8Nqjim3RPOO2uvBx6ivmVCN0XzTA/\ns5fAUtC2+pHjHZG7N1bSXe7UcBWlA6cXPLyuhQ/p3BokreWKJUGpyJtOgb73\nhKd0zhgsmX9Zz3GdRjCZkRNY9jAAI33KZm+vdZksDrr4XaaHvybX6OWL8wxK\nMYL4hQ715uxVZjHUoBc3DMHd3M39GnwQJyaTwz6dBmOpPbuUWlaBbhkV0wa2\nNk/3WwE6f9limnbxZVP3/dqHSGS1Cku05Mqv5N0EIrUXWSBDUe1J2QOGVEqL\nEDSZRPqu1UHiJDeHWkrRjRN/whMCu9Dsk2MVl6giliaohkHdnTAkqPIWqiOS\nLQSSBqXQhKFBGhbF3BaN1UZuIsbvirUCybvyZcJ9bUGLok5EwyNRbYv2U+L1\n5xhQS2YWKP7Wg9pD0eUwqVsXSD1+9D3cv1NqYLmFpxKs6wYKIFDcP83Wr3ZX\nwVxE\r\n=Nzwh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1RVD34pwU8gEPgHuvLtccE8t4LL7VT6VZpVayZWVQvAiEA+eYf8V4p6u+yFdeUnOFwasyJbc1YoMJpUNBHwe+i5qA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.1-rc.3_1575278200017_0.5052026935447813"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1":{"name":"@wework/react-floormap","version":"1.4.1","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commons -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"439856465d46e9f526b63b26c11f5cce4381fa62","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-7s7jOTH5FA3JC0G5TmzIHi8Hw6RKQ4ouUa4ekkKuOE1CnrpglvA5xfCxhpTzscbJXeeDtrTWiW0x2HJWGLjl8Q==","shasum":"c651e397bd8ea43f98ab47d956e720835a48c90a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.1.tgz","fileCount":17,"unpackedSize":65241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5NvLCRA9TVsSAnZWagAAbloP/iwzXw6VHHaJptWMWrS/\nv4WCZD82Ws6N4J9h6E7Cr+gmcqpn1ZiCgUHdQ0o6zKKRNAlYgMM+aTpdijry\n5exNMfYY5Z+5O8hWkNEjZ57BtbLcxUjJnGum1Og1LaIw8yIHH0UUcPdZD4S0\nyEpZi+VRnTCzRAeTxDO/eJnZG2g97HRrVHfU20dSTpzpfvzU6hDITJrG90JO\nnpfE/kCgIthgPlmgdimW3y2cjx5blzJbsR/545mqnpgaRR18Y7LcAuXF1a5h\nRY6l5QMrnfS1A/MFz28OMOuCxAu29Bqv1ivX5xlNtU3zf+NmhM10UL5+7qbW\n/8bLhsFIE+Oo222zMoPvcevXlHl/49MuzUR2F1ur+7OMthNVZabp0Dvh/ctK\nIuSZT2XZWU8XT0rDJqADzKl5RpEdhuFGtyzjk1lDwmfzYv6mDwAQstPs0roI\nQy2zWco+xPTQuOPYdkXH++I8Aumc80Lmo26W1pRoSlgJJLIiLqLCdie9fL8F\n//XHIOnphc1q/ycr8Jg6Wohvn5AFXdz2u09MJ0wdK7B3DWFbUJQOS/PCOqo0\nYNvOudMOZT+rvMeI9NhbsFfi9NB67pDRkWCL245qJzHhHLdrfHUdtEaksEuA\nRc99CemAmv0Cb16xZu1Y/VnFBSppPcjkFqpyHMY32ZynKln3UgnqXR2yLU4A\nIIyT\r\n=9Pk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCToSbcA518QkllUUHBbgl7A0YjKKdh70+gD0ciWRl5RgIgHQe2KC27APCieeYqRnooII/aliF0fc9J0K7QPH3BBe8="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.1_1575279563032_0.17079130937489007"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.2-rc.0":{"name":"@wework/react-floormap","version":"1.4.2-rc.0","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commons -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.2-rc.0+418661d","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"418661d9edb16554e6223b59391ced9f920efc98","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.2-rc.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-bdf5zBgjgZF2lz2Ml+AjT0AlvwtXitmz3eDEPLQUfIV6TE3Yk/OxLWuLSmaI1hW0D7f3HqV8f0GJwOjZwwgP+g==","shasum":"175b3577aa166495d62fc1573a70b38f85ebfb1f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.2-rc.0.tgz","fileCount":17,"unpackedSize":65267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5OmtCRA9TVsSAnZWagAAr1MP/jhk+OBWaOEj/0OuvZOu\na4xihJzUszJemIrnhJphyjSAHfvHGoBCQBGGaZeW263Fz5d9QfFMBfu1cBS+\n920IbI3rBrEplCQf1ypj4sA9m+jWk1ullajy+X70bnO+mw/5OguJivQsbA74\n31h1r9b0+BWS5RtAuvPBc3IMVC+JIUYk/eD94Aa41VOv4tIHxsFxHWuc5D/D\nYbhu6pZsxScAxaTpC0RhyqrGkGM08Qj56z5hGA6JdMSymCXlIIvsPAAMbznF\nI09q5GQyVLHyKkBABlwOGCOOPOZEPxzTkGjmchZ19xp/kNwilqZchVbpa/Tn\npTOoDXoypdfT2jXErFfOwh+bTdh/o41f659wUH9STPvlXLVFZguB2Yqvep56\nRhFyhZ36Jzi36vvBmZ9u3B3s31MGIWIM45djRTvvXYS9viPXVOU0O0Gpz36q\n7c0lXIrFsJQ/RRwkf7RL6RYBIkEpA7KxdT25aj4evQC/zPxtZ1cgCciLfiWr\n7SQ4EM+BMqEchz9QIAQdZTVPN0ct4nS5OHHcGYqpwD9h1jne8klC9QG+i51d\n6Rn3S5Gk3RU9BcsLa92G0h4TMYKw6OaDTJkxBpWOK1rV/29k97RYyNnfGLTp\n3QR5WPfOLvaGl0CQyACLNPYL4SfLsnUQRKGlECaxN3p5sB7XMR+DtayZjeNV\ntMaU\r\n=aq0E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAvH7lLMO0up7ieZEitCWkEVup4XXG0grsa8X+ASyhXAIhAJl49TWZImuSIc4KM0DEzY8xXkmACB9L6AYY7JfYB5Ot"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.2-rc.0_1575283117244_0.8299469751611253"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.2":{"name":"@wework/react-floormap","version":"1.4.2","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commons -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.2","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"69e8b79f7be496dd3216980c00b1161af0a1a641","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-G1Pf2lg5S0wo8oD2ltfwrCIhPbaa1RsC0EWh1tLY0XAPp73hM+ibYLboZm/6LcADjamjAIk4gw5W4dFMLj8CEQ==","shasum":"a34b0ef04c87445ef15efd2b584e1bbb46aeb14c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.2.tgz","fileCount":17,"unpackedSize":65450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5OoXCRA9TVsSAnZWagAAmj4P/1ePc+jhDgFwIkHkIG7R\nCnxyPpuDnuB7+1UI9kBKgJQKXHj0eDxD6dzIm3meQiM9thYR6q8F3p/iSiS9\nKcn4OF9iOTV6EViDk8Qizf1f0XIC5rGv7Ce8/oJDNWwDu7Oq3rgkDd0TwZo0\n7JLK69Fpy+hC7DCjK/VpQoKW+BSLL20FNz4ktpAXq7RohgaReRP1/a7xW7hM\njs5hdLLgONtRyklASobu/lZmUkrU6iykvkqeDrGa2MxumwlMtNhuPq0xGyVv\nU7QMWVZ6ZV0x7FNT4tmW8n9U993m41dAyExFwg7++VS5pOAAWu9jY0GRuZgy\nPRk0/ewmmxHa2t//dyxqjDlZgkOzVv/w2ayZoukZ1AfZfxbamkzZBd8IIpMc\n0kNP/IsFr+24vwub3yQD2YDaVlYwLJvfQfHeTiupnGvZ8/5IpJ4pqWlOfcJk\naLOLR7/MniKbOZANzbAFKQa0TIeKreXOBL7Ba1hRugI+03bVxCa6ClScKto9\nlqiQeBczOeUYdg2aKMi6seDJf4BMBcaWabg5u9MFfKgHY71iPkxC/+If0jkM\nu98CQZtb65Y5TkeKv1pgFbi0MJgpS50zU4WrHA1y7TAd8wJyUJ7HtPzRKQql\n5ookDCYzYuipyeDqpRoiss5TC9EC39xEp75OCJIzLPlU4MEH9tpk/fVQeH7x\nsvBJ\r\n=/Fvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/MPiuy5o4xGbkTaYFvGJ0c9yHIlXECZ/ef2xhkPwsEAiAq6Kv28TOST51KK4xuSprdqE/3yiLUhXfi1YxtoK9KQA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.2_1575283223349_0.5838790850922202"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.3-rc.1":{"name":"@wework/react-floormap","version":"1.4.3-rc.1","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.3-rc.1+a2b6256","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"a2b6256831278c2cd96998f3120ebd650ea27510","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.3-rc.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-DYmzXaSofOWUABw/Xd47mFLcWYE04tfELlkpoTqR6awGk0L1iQUtMNTlUvbermeWkyXDjSVNJhQsZ1k+wdOCqQ==","shasum":"6cbdf60592c2535a634a15c6ee347426b4028013","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.3-rc.1.tgz","fileCount":17,"unpackedSize":65477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd51NQCRA9TVsSAnZWagAA2XgP/iwNvBhjBzJnF5M8oHiG\n4NyD6daz2w48CVLhZxgQkdaDnj97NVhZZD7URU0iMCd7yAeGjUdApjCSrXWE\npi44runAVwkcAdsFiIE21R1LpZcLxheFdyUvi7P2v379DmROvnWns1YU7sob\nXInRP5c9ROt8XalvFIloZfLku7pe3QrSrufCegUGPXPcQIStCkTFLHFILZ6M\nRnQxwOcV1P1H0w1Cgmohtz4kXK3T8epqP7qy0purLsv0DlnEr18aZnWLJwkG\nAE8KIjrut1Qg5CZcZ3fxGmo47F2ripTrJ53TqUMAHxK1UkOns/ZlvfxBGsYp\nlg1WATGDMFMTiG1Cupym82qR8BFqqre/sBLMTbHzUKyoGsszUiRFVXF+MiZz\n1FkJvEzjC3WcmX9KJT3t/kNX1HPVR3CEX8Rib7Ks6VzfCiWml0sJOX2+c1T0\n9lwxWN67ixyREZZerDWl8Uv6Ahw2v/inGuKk8TkmeFh5DUmKsBIFRWb/ofSn\nNZHFyNAd+On2gPnCIFWwicfcLZrXryyZomCVh7jfi+EJYa231lW7ruY1mTSz\nQt495Jtchn6HmU2zFFA6+s/9zFNLAAxf83zGhf2YI8NmovOvn+QE5asfjh6q\nb1cdgZCCdaqf6CzyzQD7fv5M43LKFYsxqhbZhesQKJQh/YEAgRXmamnJ7QAm\nBnKr\r\n=BJ9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrMtoQwRlZAttV5rwtrVYJB0nmCb341uWgPxdAICJg3wIhAIVSS5H7KoK0fbl8CAWMNBNCDLde+QpNjuGn2EiGx1c2"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.3-rc.1_1575441232457_0.5224173642018419"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.3":{"name":"@wework/react-floormap","version":"1.4.3","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.3","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"a83e212373c5c12036b86cb081a16f6943767ed3","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-VnHdbJ3kQBQOp5rgqvE6/fqcttPucY8Yys1SJVVigBwLa6HzbwUnXeJxur/+skrmS+fPOLxANwzl6uVnktvKgQ==","shasum":"c1bf11bd7ab96c7ac9b9f1a19a92259f30553e99","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.3.tgz","fileCount":17,"unpackedSize":65660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd51OBCRA9TVsSAnZWagAALRUP/0IXwGUMJc/Suio+khT3\nxnoyo5+50wiiz7F7Zn3ZKp5RPo1YrKZDBQp84E+C7Cn5X33jUk5bjP4vQQ97\nuHImb1DkFnDZiGbET8Wey3toMRKKArtHEV3BXwMVqRIqrD+qiOKaXMlLY0+J\nebZLoJecKsVBKVFiSK1njxl3ydi7T/kCjgKs+xD4vzEUBE1LF4WHX7aq7sGt\nqj0iJNEURf6r9XFbaxjxrC1LBAUcxgus9dXTp9dfMurpznG4daU3esTLXK3V\nMav3HvP2yqoGSKUQ+T/G9XfkEmP7vdAzM2tMGDMMFtnUkatNXyJTrEJNHKiT\nx2ExcFbWlBHek6YiYLvJpBqYqSGdKv+FKhML7ugRf+Rm/jIu2Npp6qxyTQ1d\nDtI4dvUQazpKdH1og3QunOwE9r59bc4IOzwc74uyZJyqCRCiOzPlGK9oiaF+\nydkqpR25HY7DOamIkdi0fohki6huYec5LjFu395sTIZiypJwBgZyYXS0GPkZ\n6M+P+zbb0pyR7pT2YQkp6+Ra5KHcg3+U+CjAoCZ2wh75NNeVuO/AC6Vfz5Pt\noCNy4SKF8l592c+hSWwml4rmW1xeXB9PmSb2irHvqKZFua18nmahSSD2lUrN\nBzTBWxPap501M2JjDP1amhBMTWgBDNJnNwTKfoHEFmwLVKCoIgjdrWUCGQpQ\nFBhh\r\n=aRH+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAlfH7Jlvviw77rQifx02feAyUNRgkh26cmt/dBh1YyYAiEAi218hPSqdh/zDOYQUdDQU86IGokP00JC5Qll5foVImU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.3_1575441280569_0.7186433172728701"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.4-rc.0":{"name":"@wework/react-floormap","version":"1.4.4-rc.0","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.4-rc.0+7b1b736","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"7b1b73661f450fe73389e563585354983b30a68c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.4-rc.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-Z01XlLAw7CZJgxx2aYTQUUebwGpn7dE2hMLj/PgRJk0hKf8DMkm/wl17XsIWZq3ewCQ37F9XrPdO8PIfWh5WUQ==","shasum":"443b77b7e03c5ee20530b1cbc4262bcceff0c0e3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.4-rc.0.tgz","fileCount":17,"unpackedSize":65686,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd547SCRA9TVsSAnZWagAAqFgP/2SA/qSCOV3dX/Vr1RBU\nTxuz8C2NJhH5PUs4TKHgxWQYvd8ZRNEz9XmyjXYwlvwbeRYfCZoEQuH+CCTq\nJy+Qo7gWTlPsUGB2CliDO34NrMt6ukdP5CDvIAFoY8LTrjH8uOrmTvJMEgGZ\nokzT0Hxlyy2jilhO+hQQJgTnNVN+qcir4tLrxww8EkRTjQQoMc1AE7HBeS2m\n/bzF6DQLMkzrUb/HHjM6TqEx5C3G1u3HLSom3r7Nrn4QWJBzoXKt8J1SaeKc\nv7LGdQjbFVNi7aK+Dok2Z7qI0lBZczIVwtGDcq2qtIEBySZ0qf6YgvRA1d1B\nAjND7c80PrZGwGPUMA9yfUK226u/bnzXiNShfom7ivtmpo7Hm4O5pdjIJv6I\nGPScqymp68QY8c08QTyVsLVbsUgA3oimtYRoOQZN5AfDnTe+Fz6IzD1g2ME7\ngmWT01NpAKRBgiUYRUWY+7KG1dLuY0MnxzZIsBOrVO2WwC308iAn0ZvZeT2A\nrQyT8/bKxcZiCn/mPYdOFlR+5POBve4RBgrgYpV5JlNAhY6a6mTzsYcCSLew\naA/2XOXcX/E23uC1D6D10rO9/mXazcis4cj8+Q5jfwRL8aVW/mwal7Kj1hnC\nmxHX0q6ghd9Ei0g28DFtbhTfvR9px5cyjjwPYG8A6qcLrFxorBc9C5kpu2X+\npZTD\r\n=NUo4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKFKWA8ReMS+0ZTxqtP6K9cMRmMfmfbh6Wij+xTxP7ZQIhAIIZgTTTkB/sG0unH/6jviDxm5jn0QGv6UBSNlLmVJB/"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.4-rc.0_1575456466354_0.2695461523746798"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.4":{"name":"@wework/react-floormap","version":"1.4.4","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.4","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"80752ba13e9c0a8c412605535ae8079a05e224e4","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.4","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-poqQdO9svybpZzHmrndv6LqcG+LlsjM1VNqoCbtKtl6xXukejXAkr+aZLwNRadAlhmcwkPtUtwe5is1DMeUJaQ==","shasum":"0a891b936fe659dac8e0719799b0d4893ade5d3e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.4.tgz","fileCount":17,"unpackedSize":65869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6Ge5CRA9TVsSAnZWagAA72IP/jDYe4Tkk/3XMlnOyaXL\n+rWV6RVJtBvN5xmO3sDC4uPSWcwYrLxl/wsenKST2d+j9OVuBKD2+Jlja+AB\nCFYiDLjycKKbt+JrqfC29cuaTiHe3IFVBQ24W+OBcMw5h36XXV+CNJkt1iMk\n8R3IGnmI/UbzVzvZ4ar0Omrybm/CJXngmpB8n37mFJLYjJuSvirLtgkyQuVh\nXIzEpeYpMewrQPFxWs0Xl8sUDoEXMUHGJWkp4bmyNzdXnbDxjS6rC44ZCgw4\nQ8pJOgbGSVMpUwoqok02SHN6fqIxTgbJUqErmQHEgLuhoyEDjn9h2r8v75lP\nuZ+LTw+YzdsCzBcHskbZWP7oZsBDvCYqKSFyfZcNVPUFQMcmTk+F+2zkM+sj\nXD96dXlQyniZz8k9Tq72quAuDDUq/3g+I2yHpAT7Twq0reKDJwBwbXZjPP60\nfD/tLz7/AdrArgYpU8mAtdSUjbe2MvLOwdXyuCNYh7KBzJThvDLu1cmfZnje\ns+L4dEMYuBrHuynyQXRN7bkQ8h57vb7uTIDAutJOpVg2y0QvrqJeNatfHTLY\nbrDGUQXHe12HAJ53TpndHoHl7iuPi+IgYmhhpwvMN9tGSor09CyxTFqCzObt\niA4Wd0T0BObwLaL/EmPoS3fDr1JnSMqQK9u8CtuXQGdNml3DdRHZWhzGknyq\nvGfe\r\n=5jsr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2c2vyJpsQZzecgcPitdD363IYPokGcS3XtGUP7FA82AiBcZsixg/GKl5XAbLJ02fROyARuAtH8ArG9+qlyQ2o/hw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.4_1575511992916_0.5510858230861033"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.5-rc.9":{"name":"@wework/react-floormap","version":"1.4.5-rc.9","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.5-rc.9+b70569c","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"b70569ca77e5dd8e369281b5d5ddc5d025412e76","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.5-rc.9","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-7jLt99ul6zzo2Lcbz6iPy9bv4xDYYkkaU8Fx0z3fiw/+kDSSbgHgUB4dH2VOnZtZCpgvS3SzLoRXgEpgXn9ZCg==","shasum":"049ce93f91d34c60c1dfb1a4120497ba67afff91","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.5-rc.9.tgz","fileCount":17,"unpackedSize":65788,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFCQfCRA9TVsSAnZWagAA25YP/i+VaXLVLOAr4CuHhz0h\nU2cK0pJq56PT0pysZ4DnJKXh5hshmp1J4hnAA1oGe1ryEIbrXNVzIaxAa7XE\n7hAMksbe0apt9sUomZRJHj9vhCBC5bVdEVGnsLVie0m77ci50jf3qoMRbMQr\nRByMgtisqvHFdgOwDh7Dv2x68Ms1pVPKmyRHylanoD9guFtEwTIkwZQMmaHa\nkZb0LJeyzAHem6KeAHPO2qhFxHHNApOoo3HuxWI+EgRtxLNRqJ/3G5ffUfam\n5XdG7iqyLGCoBIitkPwk1utAJVEB2dBa6XOrz/uJqt0ZisQ/o1dgaUm78dYC\nG1vi0g2joBqM7K96UXQcrv3EFox3KnLPZQFwSSiLoApDw0R2JrDUB7K0os6z\nhMwDPELiyx91LKUVN7h5MJ9FFjwSzOCt7t1cGTEjFIEGjCIfnr64+o8KCr86\nldRXZk7wswPGacEd5hskKPaRIzTkhxlh1rVB+gupTrUl3mpVpBLh015vQXMz\n7F0+2W9Coc8zmeC/HX1WXdgA0TMGvw7IZdTJZLNH3A0jvzk7f6+Q3Rsp+etJ\ncu3A3M1bQDTQnSy4XaLkSce4DxvvZ/tv0fBCG2Wgw2xe9a86ihqFfF/WjzqG\nQHTdIrzuXWXhrxYu+uMz01XSgrDcsbYWgwBIsX93ViFwO4Tv/za8gWd1twdF\nStWa\r\n=yyKO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFojGLarcxztfCSw6fooEyqVF+1FDlpFi78myypjlqZhAiEA6EBYbvxET1SWUBX7f8pHkRxRNyxZDVNDZgqCF60/Yaw="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.5-rc.9_1578378270645_0.4120756564083592"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.5-rc.10":{"name":"@wework/react-floormap","version":"1.4.5-rc.10","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.5-rc.10+9420dc6","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"9420dc6ab241e76739b02f1029fc709dd906f34e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.5-rc.10","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-4BnGRJmEdzhhSts59AIY/pgs+ouSjY/PFRQbYjk9naeltgYUdm/I7yyPWh2sr39i7GROLVWcA1MvlcjgM/cr8g==","shasum":"f1fb1e7e64a539151c0f624c0085d1eefd3e0299","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.5-rc.10.tgz","fileCount":17,"unpackedSize":65790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFDfYCRA9TVsSAnZWagAAgyUP/jyrOxZz5w5evsKNOXBZ\nFiFN1LKIfojdLo8FbR0ldy8qvEztfnkyFiBeJjLP89h7fWZKDmzn2nn1wRRS\nH6AltrSo4kmgjPyNnpqlpLCYvMh1cJY/aaLf0UjIp0SSjE0fKnobp/chnGM9\nt01BpVnpQwFmXOpX6tTJ9TBuEndGmQuPLOkRwXDRBnQJ2xKIHeotXiQF3iUr\nqKRKa0PYcUmJ4ay5TAWAJmjW0/148DVcxzqnb/FfrAYw3rjeETsw9H9IBmAj\n02dnrwrAnDjVa95Pe9adN9T/gR/NvDRcMiHIe8cmqoYAdCgJBnEsKioxBADV\ndoKUTBbp0hVzJ3AoGILL0P4Ae9vLCi5A/8ZnkHB8atTRYUeRf8E6JM7kmDWC\nnuY3ltJvP3ngnhAD4nlRsaXOiJVNLAmgRIrqzUEOH5gWPq6RAu6vuENgkWY8\n4i38LxeE5Gv4JddULOIctUpfixb1PKp7a2fEzrW7sJC7FNoT7XNBqTs0mk0R\n0JABiKb0d1/+VJW2ksY8/0pMViF2yR6Sw9sKq0JJfoDXMJlXHhI4GYHzfFvg\neOahrvbWiyumbhPshmrG+J1/cNyHio2zE+bifygEs1Cx4pgkvqsmZq1sXIIT\nxyUNK1he8m4dlycaY8U7igBG+5PyltX+uuVcV+rznavCdPDcRZJVhCukFqfs\ng+kN\r\n=BOOx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbDvdD06P1esaYfGL3GRjCdsbnnZl8oHLB2/m/xvg5kAiBcNyWRlUJ/s86ZFsP9B3q0dwbcSXDD+3lZP2b1nK8L2Q=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.5-rc.10_1578383320182_0.5954137956436483"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.5-rc.12":{"name":"@wework/react-floormap","version":"1.4.5-rc.12","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.6.5-rc.12+4b3fa5d","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"4b3fa5d9fca4b591ad16d7c1b8d77a3a2a5af558","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.4.5-rc.12","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-y6aU2LpUfNrpQRJLBZcd/31IVDdvwW6v/aKkZt0SVWLJ53JktPcJl6H+AUbgCMxT1lmEIgSL7Ic9QUmu8c/ESA==","shasum":"bc656ef6f283d9e5f2761a640de982d37d418e5d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.4.5-rc.12.tgz","fileCount":17,"unpackedSize":65790,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFohRCRA9TVsSAnZWagAAvhMP/Re2zmgKuUiOnJwA4u7E\nTnWPVb4XaYCdxPP3Z3lJFcVDwn8xLhqJSD+O4skBdU6/VyPNFayGKSBqZ7Xh\nmcw645TpNBcqekXA2RmyQ3qtRBKdelfD7vsI/zC87ow8Jhm/FkJRekdTAk00\nzGWIRE1GfVJbhzsUnh1zoUV4xzRrMju52mPVl4gdsmw066g31Z9Jue1kvOCn\nGW/wnviCoPdr2X+m53lvLeguSHI0yq2AD/YcS0GXk94/NJHZl61hEsR8lbuG\ncQZpYSKo6gWVJVeMP8KVqElszaXdBRipGYeHNp2/mRXT7bO5xq1QzB8DLa2d\nil0NamQ0swWptF9QI4rTBSakXBhFcqLAKQuHy+wwXaZ0gF59Kp+dpikhaRlg\nDSyRjVObRLynn6jgq5mPlutawi5R0OmS6Ov5cPF1Ekn4BifJC1CBX6EhzxdW\nqCahHF93aHmLQjhNB4tHirjwljAhMqU6+KOsiyHEo3Biry63OP29sq60iFj7\nmoDkOrBnGNQkjh5tFXlzp3+C1rAeC7fF96WJwFCen0ZN4vbu1szyIFrsLVC+\nUVjgu035NsgI1ZT4d/NGTIOeRAlhIEz+Y74WlF0rrCKEhqqcyTKe/FdSyD6v\neS3D9uWhk1Qns4Nlh8mwKdElYDiCxvfoDRD+LZAyyO53/KWmQT7rvXFQkir4\nG7iz\r\n=N63X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPwS1urhXLedaV2dBZHY24ME1mtSZuYX0sy6WheFdDugIgZKHHBZNWa73vnMkxm7ae0dHm52v2LAtUHw3waJMgjbk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.4.5-rc.12_1578534992806_0.17075419799252223"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.0":{"name":"@wework/react-floormap","version":"1.5.0","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.7.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"8f4093bbd9be3643d3ba1a5f94d3a08be26ed2f3","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-sjYvq1eZN2aBYqoofFi23r5ajTbhfEZkmyNhWtlnw/bvhgzMmqzrJypKUKadhKzbBxwWUIUig0q4Md7P+EeTCg==","shasum":"fed4785148d2c03f43a487a86b4ebe4a707002b7","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.0.tgz","fileCount":17,"unpackedSize":66124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFtY/CRA9TVsSAnZWagAA5UcQAJ8+f7INyRdUfOC9+p+z\nw6u96O2PCewaThjYFAARyG4GEFqjM7iCErXGfz5tU6PAqAUa0JsFWuB+n+2T\nGlrilsWIOnnBOFGCluYrjXUQqF7PmlTiB1sFDsUsfsOpKXVsQ3e2uh2qNGe0\ngtRUYTpPkzYAknZ0anCGDrJx3DGLnjWRo20KqfHIB+Svj6YK9jP023N47t44\nrjzzfLyTS7HmidK7AszYE0BUWnL7I73qPVvcS7i6Ez02qxu+Ko+av0DmIG1O\nt/VfZMCcH1B2qKCqIEeni7m/fjlQacL2dmtQCNLWzpaPM+ee/BJuXRJxLw7A\nxb8ID3CET1hv3TiBXcF3F14CyBE36tvZkSlzq5S1rfYcmvlB3IddGCT2ExoE\nuhA3VF7KWV0EFcJU/dvcuBXC9Pe1Cxc3wQQFAIAj1PvFFMellINaGKfNKf8H\nMwo2zgg8PKwG31BnavkwvdDRYOET+nDz2ZPwUE9Tk0HR84FRmVU3Es663erJ\nVznohTbs/SzDv+KRSnjwOOwneeP7h+eGzhttfrDbMhg0rAZB1QeKCApk0AWL\n2XwdhqFb6lO1CYj4q1X6+I9ZWXq6aMkcxsFRRKLoYKzIFOxkHqDD7xNeuQ3a\nJnXIt9qjb9+O9QfsXVae4+CAiFZPZrV5U/bH3X5+f0Bmz8gTC68NU87wGag5\n0qoB\r\n=kRjP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCSCClv/iYp+V+9W++w7cEDCcyhuGgPHE1Sb4/BxePogIgPOk7E3zGkCyLq9bZnZq7tYuHLB3UTFLHWEkmSJoklSs="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.0_1578554942775_0.6490215645555797"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.1-rc.0":{"name":"@wework/react-floormap","version":"1.5.1-rc.0","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.7.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"976d32df9b7460d32a4b766932c995be9cdecf63","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.1-rc.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-kYI18sMdXHNdhJoEctwD8Q66TzlyhMtAsSSQY/B8Gk4va5dSWnEc0/5z8pxin0p3fxrgnSUoB2cMnXtWXZFLvw==","shasum":"234f54cbe14fcf2e70eaa8e68f7dbec968eb0835","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.1-rc.0.tgz","fileCount":17,"unpackedSize":66855,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGBbWCRA9TVsSAnZWagAAmnAP/Ag/hm6aBdPYVKAjYfRS\nEKxGKXoxpP4VMyuF/IS4n5ZgUjUVqg+sadSGEbHAuF1YwNBQj8cLJmmYww7z\n9Inxk9omeDssq9KgugN7pijI/L5aUvf18sEef48jCsqS3M7yaWkFhImX8pbb\naXZVJblgH+UsPjj2cgFP1M7E30eZpLgQYH3aAIOeLSvjA0vfWfSoJnQWFBoL\n2uu/af80GzQCuo02pyhkzIW0AlFNj8Khx2fTg8fibakG66DyN0u5B6elSGdU\nqQ7kPxGbKpTtASDx+11SC5EZI4jkvsKl06g+6ewfYymIUW09VaPSNmyHEjM0\nLKujNKujkp3kXihZuVDZIIwf/5XEvilV3pXaKyiNuzJwrH07AjZJOBLiK36n\n7fP6rNWNDlTzB1llexH3P4DJ1zT+yQmk4DUO/3eOz3WFbomZK9iNv23uVkTD\nbjVY0S/iwzFmS9riBJiK2SgfGS/5Qc9M1pW3JqgUalN3zWKoWxHFo12+9SdA\nD6U9uzF0qEoRd2CqOrTuxrb6tDlK8N4/Dgs2B7tBRETzU6uJcNBDLIiaHhOw\nXyI1piO9u6Gj9el/NYfiwa1hw61B5vfH4LUMCXgKyiNCMKzI+OJDxKtb+pMs\n4kiSRs0xeGIrfCBME4kaZ59hR1F4EYSDQMu65xdTExj9f52hEH2QaqXWdvzq\n2czr\r\n=dJ8C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdvXSwzprArXhfhjM1RVel8NaL79u8syTdl9wr59iiSgIgIJXCqOl6g/Suhij+dfxAZAGYwQ6ehp6NdY8kkbhquKM="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.1-rc.0_1578637013797_0.8864401494672569"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.1":{"name":"@wework/react-floormap","version":"1.5.1","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.7.0","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"2e61b09ed9c0d1727030ba6eb38ade5ec1f58bce","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.1","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.19.0/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-wzis8ssuhVC+LDo9JgduifM9FKV0cYXMxfawqMCWwrxaM11YjXzij9/ytC/8siGKpzBB08Dy+9shk8oDI8FYNg==","shasum":"4ff4b96754ec187d6def0438216ce3d0df02c60f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.1.tgz","fileCount":17,"unpackedSize":67236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHCPpCRA9TVsSAnZWagAAdykQAIRwu92SDFpx/rkdXYMo\nQyUcy2wo/AJb86Vdj/J3buBWlexnLTttdeMcegTN/L9BI0LVV1US147XPVJ7\npxEbtnOgZKbeP3Z0I/8tqaCNJc1/lEb/+tS1EBBHib9zKs6OJ0whcHMiyBQA\nxSrMMfe8d/KZJ1+vUny3jPKcikUAXClqn8JLO7ZMtfRiwVYRzE0KwKUr/Dh5\nZovAncHGKhLp9kShnUGGz3Hu+Jrd8W+nr+iKI2LwUY7qP9nlT2mr+jocRD5W\nTq9pjPB3RU5mLzJu5npK/SMeCBkHkdfiUTJlNbktct4njEBOyCslX1EDY2/E\nhrFLkIWZnHbsRiAj4JxWyIQmWf2jYqTRyovp2Q7OPnOKgpNXEhYgc2u5BPUq\nKR6FQgAbYJW3yIyFvH1T+5fr7s9DasjDk3rYLGimvpGdZsAUjY6u4GZtzADk\nBEReamTwFXdaIVU02K9N0Jqj0mTP+hXXIkPWn6mPoN2DukbLvTJVirhywho1\nsu8kr8JBTTcaoLiga5GOtWAyxg2twqgnCRXiUDxRGqpAYeoQro9P3/SaeTAF\n9dDAio5wj1pXWG80VDd7yPM0WDO2XJ24Hi6QCtofKo4fBxgvE57+xlHvkv6/\nGxlcOFz0Ld9UgL3CDZBb2hpOQpcRp+xeu9REdyfS6R3bcB2cd77r0jv7XnOh\nL3Yc\r\n=wMIg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChR0MWKVAPPRgR6Io1LIQX0aca49nAvMdq2pg+URgD/wIhAKCG4Cc1yT0Xe01HZdP31CfFv1TonYQO49EkzX5ocQvO"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.1_1578902504680_0.40993735565486755"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.2-rc.1":{"name":"@wework/react-floormap","version":"1.5.2-rc.1","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.7.1-rc.5+58e46fd","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"58e46fde687211e9551af3eaf28c9d7718a7ce18","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.2-rc.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-WINUCodwkdn+mibMyhg/4KvvKwHuJe0udFW3DziAw/Aymg4JHfIb/hxR3/cX/cMmMZNDD1CI9AYEEMlbHu9irw==","shasum":"2d53da614c21c00c0cdb8fc89fa1d52466fe3ba5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.2-rc.1.tgz","fileCount":17,"unpackedSize":67262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJWrdCRA9TVsSAnZWagAAgP4P/3nMY1NcMhV7Xi3t1rrQ\nmCBj2sa8LA4FuwXrPCMHmH3Jfa6mz6z8bBAgoaliDkPJlnzmx9HyZahDkAE/\nJUDIPXBY3f2LAKHXyd0oie4MqdIjev+qzcYvTcTDLySxIZZSHji38voQgtq9\nde8ZIY/V/nxzJXhwj9+RSAxuoykloJ21cloncL4DdNLFQcrqkKpJybvSPyPx\nfbO/qtlmGjcRQuQYn3hkhFMv3+Apg0xAehnbalctMkxIUPQvrdues0sl45n9\npQVCL4idp4+GihHWsWbQeSTovFbXpEmlJWBbvIA3h4FZvBsu/2g2E9vDPK6b\nrYSUe6vZ5GFovCSiV0WgzXAisNiwxC00u2HbQL3PVOsWHmSNv8Zxyo+/kIfW\n3GJCrnsd77TzotaHSn/S3OpWGVKyhGvcDiBZIRuTPhMWIPmlkHff6LDymrE7\n8yumprOpbw9VpOkk6Ff4pkZecoSEQrRBJlSv4mzFhOG2NXVEmQ7kPB6dMWvK\nxPFu7b97DB/Rahely2Jrq7FMpHWMXwepcaCpISOwrgbuk1EmZVhWBl7xILWU\nqeF4dwFOfY2eEnEbpUQdx6cGYd/vxfi9Wqh6vzp9w45kor6prHDvtvjG0VIh\nKxXJEjAf+41kFPFaBrQdxRpURgjcKPh5NIuB91qLq2s1TEMJDjoEaH3LBZvG\nLPdk\r\n=WZ46\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3U/lAtPqrCiQwyULzWctsB6FTI3J/bPST78ClY0x/UgIgXHtMbTggXlg7EAmnN4y+6GZGyow74z1U78ZdOyc2oag="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.2-rc.1_1579510491191_0.7081134941499472"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.2":{"name":"@wework/react-floormap","version":"1.5.2","main":"./lib/index.js","module":"es/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"npm run clean","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build":"npm run build:commonjs && npm run build:es","clean":"rimraf lib dist es coverage","storybook":"start-storybook -p 9009 -s public","build-storybook":"build-storybook -s public","lint":"eslint src/ --ext .js --ext .jsx","lint:ci":"eslint src/ --ext .js --ext .jsx --format junit --output-file reports/junit/js-lint-results.xml","demo":"cd playground && PORT=4444 yarn start","prestart:demo":"npm run clean && cd playground && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","commit":"npx git-cz"},"peerDependencies":{"react":"^16.8.3","react-dom":"^16.8.3"},"dependencies":{"@babel/runtime":"^7.0.0","@wework/floormap-sdk":"1.7.1","hoist-non-react-statics":"^3.3.0","lodash":"^4.17.13","prop-types":"^15.7.2"},"devDependencies":{"concurrently":"^5.0.0","cross-env":"^5.2.0","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^2.6.3"},"gitHead":"95bd8e3388e7ef830dfa12abff19ff29e18cad66","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-wWfNumCksquy6GkqKiw+F6vCDkDlsHZqpYMAYayLsicN2s3QhGxOFKMePR95CsdOjrj8P7LRF/juK5A5W2al9A==","shasum":"1ad505e0bd1df4fc714a02c408a4cdd7c9390f55","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.2.tgz","fileCount":17,"unpackedSize":67445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKmRTCRA9TVsSAnZWagAAgHMP/2xbwevo51utd5cC+ItI\ncrj7HGDyaGWl+RdqSKWfGd2ReBhMmHfR9L8Q20VlQdkNN4DIqVx/fQFBDT61\n01hBXo46zesCDPhRcZDufoI9pCuZd3E+/UzO2+EYIYh9RB3fOXVefcgRpw8I\nNyb3MDyOIwtS6xgG1prZy3sz6fLV2B+bhw2zNPawXyslsA1O7uHLN0LEAOwX\n17p/+lP6TuPU9/O6CQUeXdELMb3yPJbx36WmwBc4nLaHeYYl1E2oA32PeUaZ\nc6LXaDLusw/7CvbdgsUlHsRyFop90f/Bz1MR4tZhJPwXwxaNlOeHzGC0pZ68\nQecnVK2pCwoHmjkDsRG++HxeHfy3fm3jDcmclnCLsfmYU0XsCrNIZBft0X6E\nb88EdVVcS6dbiKjONHhqv/U7JRMGmKNOGTMIDO1NZFGETjPwaZjQpkDLUAgk\n5bG1yvUHHTIZEqtwo8GE+JRSjY1ptBQrT8hY2zd8y3lfEu8aQ20bIawT21JM\nJiZNIQVVXP9ZBn7bISAgjqszoWwYyjvj8cQGzwyMP/DBhnRRf66acUjQZHwz\n+j3GhG16Ncpyz1WvFtgQdVIJTOr8OdsglJCgR9YRq0hY5CThqZ6S5SkUOL8T\nXk0rFq+BJl18sFde0+kF83E07ejvq9wiMaFTpBHOT4Xsp+OPnSE3FpofLflv\nU7GR\r\n=rtiI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx7mdMu5GKAD+i5VJdBgSFhE8e6ADwFGYWj2uUcRWHBAiA7Xmtv/IZdeuTiyBRXdmSdYmRCvZyC3wQsKxvBMGfSPQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.2_1579836499160_0.1800443259293263"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.3-rc.2":{"name":"@wework/react-floormap","version":"1.5.3-rc.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.2-rc.2+5b15e74","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"5b15e74b3f11e45ce40db5cc3a799c3611bbad3b","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.3-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-0Ru7jNFQzWV7YVN6rhHcUd8f5Z579ROLXF/XflSRdDB+PL4P1D5mYgX3U5XDTcb7/7s8CpM7+gnT68i3wMjq6A==","shasum":"9c509f74f35fc381e4601ae0b57af239cc04dec3","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.3-rc.2.tgz","fileCount":11,"unpackedSize":236202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMlbOCRA9TVsSAnZWagAA+YsP+wewJ9NTQ4n+k5CAqwZe\nrRljfcwr0eiHAApdAW/4pG2YC6sgeipiMpe/ZUTQr4qP2IpDq0EWgs6ayqKt\n9YW9xCix+dI8w8DkYOrZLgOyTgtuL6koXUYLXSMPmrFe44xrEhaTYCYt99d9\nesU1bUhAKRk0t15dPw8OKlPNUzMGwSguo5gryf5XqXJah3M4JMEqc0cE7blq\n0ykR9fOXZT5zKu2nlpQVy6Y/dSLvdqGGwkJs5RunwiNKeUYjHsOAtZSrb4xo\nyA/lyi5UN7nJqVMB8goWBdqAwqQxkUnKv0JDjVlot+ylcYv7Sne8hmJ+WpLP\nhTi+8U6PgQ4jz1QFuns8mRmgt2Snhletn+lY1AiR8Fnh61Cuq6El9RKizBUa\nUYQP6mgHCXD2JNeBhd1+0100nSXjNtyOI5DMTjEHspHAl9D34s/oZw2PhHHi\nly0AN6dcyRebZO9GueQWwJlgEUDYp6tvrCHAnaKE3Mcx0fsbrFwf5473yCtt\npPVgzALbbElb+XYSQVeXFPKvJM51+nxPpsFdA1s3cGTItRN7hCq4kwneBU0J\nmZqC5hF8FznjrM/1RXxMZTsbkqn9WSpNHcKDxqnZHaVrxG/fiXWkmz1P1aaI\nR29zGT4+M60js0M26//RwjhedAzkgvtj+Gp5MVEhLq2skNGVVUo+krnEppQW\n1bYo\r\n=svOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+IRN+9TLlu0lzzDW3IpxuzNGnkY6JBxTO1whRUvO8JAIhAOjkCv8CQKGj/6LLA0jVMkhZXIcLj0tGdG66Jl3fBInO"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.3-rc.2_1580357325885_0.4525989562584072"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.3":{"name":"@wework/react-floormap","version":"1.5.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.2","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"89a34ce866a89cf2800db96d88564adc51851378","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-5q3OYlx1Jp0NTDfV8IQ2uplTVOHL1TRqA8LHJY0BBJXbkp3WKqHr5HEVQsc0tBg5z4oh92nxBy1xA6Qe02yvog==","shasum":"0f91d8011de0902edcc17207f763532de458a9e0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.3.tgz","fileCount":11,"unpackedSize":236385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOpX6CRA9TVsSAnZWagAAWTIQAIwUgdzTjguseT+jXo+E\nw5OmTNdQ0BzqTRltJcYUJPUkBJDSr4osuLSZXwtS4zh/4u3Tw77TlL3Y0bQz\nxlLuG8m0UFINMtG69mju2wXH5qAWnlFnSrjd4/Q+962ihnN8pSWA3RoEJs8C\ncyWMFg0gp4J2UzkrX4VEzk1Gzy5bK82bMwVie1xpil2aH3B2RfWv0k6Aav4M\n+zIZbl3inRgySt/6zoelUSldvbhgsjEMXlB5/WgJoLcdgKikh+qjsegI5yNg\n3IEL2oZ4W1EZQ1FmM0cVP0Rie7sWzjHfNjxBCJGpHwaFjR7bSR4abXVNrJN0\nyFsoXNREMZ9/nFmZv0kW8bonU54xDnNazzkVjMCa1szJy5+foCGVvbx768RN\nNC7h5lVJVyr0ZHQgkv6mBRYpUxJzN8VCglg701H5RVvM27knB4fD0NbTiKCW\nhCm8uU39hpt+/Kwzg0mP7+Abpz7/r/bI68BMPewEjLdvtRMJRX3bI7O1KE7O\nRwK4RAlawV3DFZsKJUFcsYMDka3NpUeAshGYG3YS/QoTVJyswvmCy9wrqr/H\navPQFoDe8Uz5jeMLfL47/Chngh485aViwedRAbEIzuelUWPkJqxYMHIrSeia\nNk+nDVgC/3TwFIxv2bxE2QPaZ4P+oQcF/1g+d0m5byjP5jRNwl9FKSW64Aq0\nzcyj\r\n=h8gn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkvd/4c4Sjtq9rGgC1Vh3oizXD4V/g7On+EYkd8A1HaQIhAIp2op5O2Nubp8gT1OHW0psdYqFufaV2YDXTnfsYIkqp"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.3_1580897786220_0.36902006850953706"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.4-rc.2":{"name":"@wework/react-floormap","version":"1.5.4-rc.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3-rc.2+54aeddf","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"54aeddf72f9b4dbd710491af4849d79ff3842f31","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.4-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-9UgBR+CBYPsWAZvq1K+GthjOlCuRkaAuzIWzC1lwYUSNTqcDQDsHTdAsH+30D8b0dL2IMFQKHMo1uq0xXEFUqA==","shasum":"29135b2aa298450efb48182dcf17632e76707df9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.4-rc.2.tgz","fileCount":11,"unpackedSize":236411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQRO2CRA9TVsSAnZWagAA4i8QAKKsE7aY+fMwhvspccHQ\ns3SQXsanwO4QOwNkWey0dUctvckpFxT2alVpc9B8gHBYeI7pu/LCOeUC/CBj\nQfoeGXfuhAQp4n2GFmr8wp2Ut8LHm7eK6KwU71iO+P/qdcjVQ8V0tTZ7PJu5\n07KJy8qT3X6R4Cfw8tbMkZ4xMFgsrGyQeCLXoVqfb6JQyz33+nwHAh+xYzYl\nZZA09GpUUuMdsw7Kd1eO2Rv9BL5/caYAOAiivGucARlvu8byuQ1NU1yTXK2c\nEt3Z99maUB/HTZ97ScnkbVlAqWWzvZ/BGDUyzl9vU/qezABl7yzhZ5F9Xt5i\nCNLkf1+a0JZaGDi3kGvxB0lID/3icy61ihLbymLYlG4l/uRQO+raHVJKhArX\nFgbYokDAoD15vSDNZyCV/o8l4oKmz0mi3Pw/p0ewspAdcimpIiABqglydQR7\nfHeg+NXfeS5XIHiaiNu+cbwOzPF4oW78tXpNQNNkkO1/gcYy0mlKFfHH80Bb\nGmwRzN3yWdBAkH59XdTnA2R6XnTx4So1D150m6ltO5r3lbxoTMngFv1nHHk4\nbPzfKbpoU1xF/RApUhF8xfCROEFF227gTf3eHtMjOjz9KZuFnUM4QewRczka\ndWNeRIxUlN2PmqRN1+z8gj8BhklJ2FmdrU4JkwxphcsuZy6Ae6YEwUwubqsE\n8jke\r\n=womc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAS/9k3rD+dgJbC3AqMsjmIEivWZ2mvjBnVN0vstzuE+AiAZuwZnXsWcQZNzjDTDFIA6Iq0NcWUIeNJpKPI8HubqhQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.4-rc.2_1581323190537_0.5701767742049404"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.4-rc.3":{"name":"@wework/react-floormap","version":"1.5.4-rc.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3-rc.3+62fa475","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"62fa475307a6198f195d3d8f543779208ed07d36","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.4-rc.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-SACLPLDgLnFslV5j2cX05V57+u3HOIIcR5j1VBx2dKsGgAUiZ/CH6/UOvI/NDYTk6iUIw2GSF2+lainXXwcPdg==","shasum":"4288839338bde22c30e7648ca2d96b3a63c6940c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.4-rc.3.tgz","fileCount":11,"unpackedSize":236411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQR2qCRA9TVsSAnZWagAAkqoP/387xyvGXuaGe8+2xlFe\naul9NMQZGobHiR4QJ52rPu9MssgYJu8RDqEAGgQZcOwV9NcwMOeNpfOuw2pH\nXfqNjjuiEZgk8I65HStYz6+OLtabWkuda9F0/r6xPRKxufetD/EYy7GqhcQv\nPvU4iQlJULovR7DbHRupYavU7YjBZpPMqZBdleKzHDxrivm9soyXHI2uTe6g\nHNHmnV0bdgNI/1xHcxyacRVDFoxiWeCN/ZUA1sl2YsYmG9AAVEl/NEsUlzwA\n3CBfcgPs3Nwi31GdsTGzmJ2USUQDCxgWhM/M6el/uuYbqdnduq1mbf5+n6rI\ncYXK+vG80vP+lObfHn0lK5BPYIpus8ea3OrI4PDCO0PaUOPWl618jvfbvdIo\n9EC5FZ8sawbGa/Qc7auXdFOwjYlW8dobYmkvuikYOghgDK1epZU1XxLLOj3z\n/SHf/hcUX0C8r2FhGwQFmTeeYIZaEmcxdsdwDf7o3PN7ds7rzQt+4Dzi8MIw\nrkXkrnOoCdEOSgKzArIpdRuRKW3bhL0yvX62gUXCSuIK1dXTNoEY/JxM3fUD\nrmURprhwceRRQ1QlwLRL+zesvACjAoDxDDfUl/48SqBrjotrwOQTHSRddLEU\nPylje5MwNOLoskN/BhieQZHVB/Q5DeXBdYeTyB7m9L0OkwL/2Ke30n3bUFiB\nAR8f\r\n=4dHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+KMBzY/bwQno6ks3Kw/sXg6vdJ+ilGW1lIF81In+RBAiBDMtohLwnLSnxtv591DLaoCE52QPU3/hpJ64KoLkj+zg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.4-rc.3_1581325738372_0.6780816096472464"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.4-rc.4":{"name":"@wework/react-floormap","version":"1.5.4-rc.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3-rc.4+03c9544","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"03c9544e70bcce1ea361d5d753242189bc1e4822","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.4-rc.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-BkhHay7RgVTJbdSGpZRwUZImDxUc9YndUZLrT2VoNa1qZlfHx729vvHAGD10ed5tBpr/6BZsuQdF/4ZldW0CRQ==","shasum":"0d2da05eb976999c169a1b0187200e7e49e99b6c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.4-rc.4.tgz","fileCount":11,"unpackedSize":236411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ8JVCRA9TVsSAnZWagAACiwP/2fDVZE7l34QHnzY11Ck\nEwfFGlA9u0wWePfq8gzDmtD5QA1cbQO+XynhBOQrKMfY3wIpGngAVSlG4yJc\nsNydOjv2P8xRMpo+OteXfCSe41/AoifxQtAsG4DkV3NkdcNOUVvrpFhB1Nbj\ntVpamExXGGHb/iDO469jp3QswZwgveXdRObeYC/+fe50z303M/m/HoPWMOvY\n02wF2KxYE95atUin7NyOgRwn4Cy7etqY5IH/KsmZwTl6kMfOLzXueC0C6nur\nZtuc6PGu7avQhdyfaqWAdr6rzppXw2xsYVaythLBV6q6YoO0LMOBNmiqcX5t\ngd1UNrgdv0tU/PfsROBVID1FOqWrVUpqxqCwFRWvCu7FrdZKF/fzcewEAe2a\nLiiT8dWm7U88VfuOyXM+Q/yqbF07+kVVzTy0MD3uyTCwhTcJ3NACPlT5uzPs\nr1b3yh/tu5p+l3Ujz8mhYS4Qzvrt0Hpg3X5fA5ra5DsLmWfFZZLAI64MOIKS\nExqrKyHqWI2bb0fydTfvl63pEpSYJA3lxV2dLSRaH8TkMt1Ip99ER3MLjjnB\nH05yqlzBK6kmygQHQWRJOnq+zuIMaLyA3sX9d+5X1b2WUrjpE3xZ4cLEY/7d\nNnmOVJxFpR/+e86dHW62qwEGS74NTrGfq+PQs0IH2PNOZE6jYLN/Efran5P6\ng21n\r\n=XYni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/3SOLHl117TimKQu9HNZV0wpj3Qey53at58z/bcKdCAIhAJ7boLcESsZ1LByCi2VYub1DRhgSCanKHr5SvhUXGg+a"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.4-rc.4_1581498964742_0.28964466257413846"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.4-rc.5":{"name":"@wework/react-floormap","version":"1.5.4-rc.5","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.2","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"82f12737f912196db506d36c09e0d000a009e275","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.4-rc.5","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-HdF6hHawh+xzGDLa47T62NyQnqXKI9KGIsrgUvFW0WkdfAwK7sMrBQgK/Rqxit+4Oj7UxFN8yOAqk73iiVocZQ==","shasum":"96fb1fcd21c0997ca59cd91107c605fcc4225b7d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.4-rc.5.tgz","fileCount":11,"unpackedSize":238326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRL1MCRA9TVsSAnZWagAArM4P/0bFtzXt2NZErMV1h4Bc\n4/YbXXmb64vINdrd3Z960q3Qrbvi4W67+2PKGXOF1CD7Zcl8nGAjouRdhZ90\nEFQH1DbFms6ev8kYU5+GoDhIuTr2LnRN3zETrkVNhi/9MrxubAsUzsgmDelY\nBS2ob3pNtUPbG6Xlib/8qo5s4TpW3qlwSs3FhxQtps9Uphdnsa53XPXNBS3A\njSrYWfaoj0KNWTgMOljomLy5cpNd7R7H57+YWDedwA7gduyBppSs76bKfEvt\nJqAlX2t8SvVbF1qJsnWUjymmkvQG8Eq7wHwjUJ0jdMCQYDb8xOl63Sre0gmT\n+DnWIo0Mn+JMWPqihEPI6/Eud0av3Tb4y6lQ5hLfKBnXyfmcPRaXQEi8Y0UB\nR4lgMfYJdQj3m50wTntzJHrbc96WoiHRSyK9dHP/od8w2qxUNXPdxGNrDfJ3\nLYhyCbg0XrO1Yqk5gTLlC17wSdgh3478F2H18zGiIhWPMKsoibyZhNCl39+q\nzMBiQlmp0RT5DkQILcczPSjZx96QjtSuqrPet0H1udOnEKmOd9km6P+jIAw3\n+rSnubpKc8LTOFnNkPYKcWo2Z2NncAER+IY9gj7TVDK8fLsdI9tLRJE7IFiu\nibVgl++p4lgree7gK/NVTT7MaIRpRD0bcl/e3Wb7clv7wjz/p20CWwpIeziq\nPXmi\r\n=RG21\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnqBNMiM6bx877joUlzCJRftM1YYA8G3cwd/dPw2IcQQIhAOCFu7D9aKNS6zeiwKdQ9mOaAXFhQPFgy8sYEhEx1p5q"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.4-rc.5_1581563212418_0.6974080444717694"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.4-rc.6":{"name":"@wework/react-floormap","version":"1.5.4-rc.6","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3-rc.6+a2dcc8c","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"a2dcc8c76e4ee97437d64928b32c428121741b3a","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.5.4-rc.6","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-5/6amZT3I3UpxmjMXsjt5y98hwoWuS28OA/jK1ub+HhOZTOj6vku8b1ElWGtzwcHJ99lJwyOq/y6lYnMNx0PMg==","shasum":"c40e022093986de414099a29abe4b2fdba96c185","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.5.4-rc.6.tgz","fileCount":11,"unpackedSize":238339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRNJoCRA9TVsSAnZWagAA900P/i5l7LPmqdU6GH0yG2Rf\nx5HCBwyj/9S8rYPiMjSs+RHZtliy5hSvhlrGBWCECBz1kT+RnyqnlqC32oMj\nKW5967YVOxVn+k5ij6uIFefv/YT1HcQ840/8d2g15/9S/mtYxEO3NUXQspTl\nqnbQ7Csk7Zo6TwHsfqxOj8Z6Z3q2+5s4yVIoTESn/fbNpER85F6IiMICWk9S\nXmFI+G7xKTVfIB+o1DPa8h/UAU6FGhaKabXRwcFIEk2Wr1O6xkeYtT/exMB9\nsBW6DRUE7cy/OmHVSSCzNNCA1lFUtw+0aT5itrPFkW15JhfnsRlz1FhIehuM\nKYoycoVPQD53zeJ9a0Ad1uXZmu+WQ09/m9zcbDcPFmUP2dV3hmn3Uq40qZ0u\n6qbCIbGPapua20MNIKvE6j+1MUFedhbpjLjtTia7d9pR+p5EBZxNnGe+qaKU\nUfArandh9EpB2+cl3MGBIBinHwWFeQEoA+y2y1t8aQN96jV6Lnf59QjdD636\n63dJDe1NjGkVzUXyzRQHoc6kdMva9fSC3GjSTo5uoj4hMJACxge7MGTgmK6+\nQIkJa0xQOYoRDcP5pA7Tv7YZ7DuCba8IqioPRP/ROBk+dxJkYTGjzghID2vs\nkABeoGNvjGJl4y3azjPGGR3vOvhchzPxlhLqQyiNO7/2fUFHWpcd7kaRIZbf\nyQfj\r\n=T1qa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl5p+nleqN5X4jKsPG+oXSCNLNFjq4S2i4gD7Y5uhIuwIgNyr+etZfwmv5kt07VYjp6HpO6W8F8t4QNZUHua7fkgA="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.5.4-rc.6_1581568616187_0.2838183199765021"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.0":{"name":"@wework/react-floormap","version":"1.6.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3","hoist-non-react-statics":"^3.3.0","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"6c3b92e57cdee65ee02c1483487b97e56e363e8b","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-11drYWNzjdXdLksikE1V2fSun/6G0wsiJProVGQyderFVcf02/WNSxByNLlOzY1iIRpNSOZb4Mb3LpX7tXIL7g==","shasum":"2b8410c2a13af2920c4f16f8c461c501c974ca16","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.0.tgz","fileCount":11,"unpackedSize":238718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRhMZCRA9TVsSAnZWagAA09kP/itOmym6qI7zcA/d9Qjs\nCcfjpz3os6uJtrDr6GSLyozAOFTKRGWujDgSfSoNrrnNzfeWwxRmxrYX4lqv\nk4s3DiQUF0QHutKzTMflnilL1zbU8gIvFO/jPgl9PvSVzwz7QtNC04eVM2Gi\nhJh9A9MYHPEm2cr+d9Mg53KeJBribbifUT0TlEbShR6S+hfJzEyOGCxgB+hh\n55C90wsxDgiIT5LMZKPu0kddhGEKCgCtd6j9TYqgJRNpwhGcacUd34duJenR\ngD+0MdTXjiYbMAqiFOSSbqAMBmGpgLcWf58ai1VzKMEt7fp0mSROaL3gSzcf\ntAn6vs5OBoBga/PLQzSxjQG3GyrWjke/NEqQL7sujGdNihdKwyzxNFfgHqNm\nrQvx0NFOhuU1xsulT9q0RFic+eWz2lJkScz/eTIRB0I2pf4aUuKKIOb803JW\ndDbs2dxz3dHEv3L0iizxDus+wRMKCYEU4Na1p/xobzU/EpaAoSQ2dHnD7OWS\n0AWF/qPyFsbpIwLm6PCD3V2aNeIGjmhskZAKlm7l0EkRlAJbtRVFNTNy1pjf\nh+4S9TEqA5422+HSYw+kOwtojLb1SeINxymeGJuw7Y6Qbu96G2QXrxiGf9Vd\n9WQhHIO3ROLi2TV38y1sNHOnKTnqDC8/xVDL7wxjc5g+AVpc2jNkNz39vTL3\nq5HM\r\n=3Zjn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+i/akhD64qdpQJNMrMzzIFr3qMtn4DTrhiz4u5btyzgIgOcn3LQaKkdc/FCN5hqyBHPZKKtTToLvQKoyKFEZ6RPM="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.0_1581650713320_0.6517626056476369"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.3":{"name":"@wework/react-floormap","version":"1.6.1-rc.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.3+f0c8be8","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"f0c8be8e04dd0db5b640bc96c1454945b74d7ab2","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-qvKNGjrqBPiF1vOKgeQcsep1akr1gHdZskpcAlSuQVHqx6CwfZ5FZRQUHHoWi0CLGA6RQm/kQ5tNd1K5B0BeLQ==","shasum":"623450ec770f6921467a76cd0dc3b8d4c963f0e2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.3.tgz","fileCount":11,"unpackedSize":238773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS43TCRA9TVsSAnZWagAAK88P/3Z8nCBhMu6OqTlP5dnK\nTfEKIRqdrI8QtitwrY85df3IJIQCfY0RLTrHFBAuXNzmZK4Mcd0WFdxFknIq\nQkF2LXA5VUBDa2J2uhoroGBRsNYfVQNajHqYI1AzKiZNgjLKfemz5L+UzSDf\nnqMHiPlup6DsytAZTzJigK3CwTPRP7kBVGDrjbNEBp84JrIYQ+s5ANeZX0Bp\nurMRbDW2TvsuPKy9FaKSAG1Z8GtA0yOCXKG2eKtRJLXYGVzLbD2FYs/rKtE8\nWjRfAPaTvd9QRv7XBzIzwf9MBbX2BK7QcHBWhVzAf29aHxbiyEIYTUq0cfBz\nflFVWisbbUzld8UmE9pE2vQZ/AuDjE2H5DpnTw0cK2AXaXR0DNAdPiFyJRCV\nPVmMygiOG9cIubCxmilmSh0zoYtkk4NpWFK2QY51JR0rJyaqX90SClryiExM\n8XfsGYkIQJfPOdBLr31z3FLlg+91NMmR4lNTsZLczMrnlTiaQiB4wD4IgpzO\nlmBH35xva6PWSeCkpDQlXoFylOcOIixvPz5lW9hChOKv+K/Cfmfh8WxPOqIp\nj00eMVdXnTKV1khoZgDqa0cmt8pCsDjOcE+tLJaJw5zIY4qBChUM82JNYp9e\nbnQcevModDXhncXccbAZ8xEFZZzTZX/h/1Q7fzzXstGAWTKo/R9Vvq3q3xql\nudiA\r\n=GdKh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL3JbHDOo9vFykfS6lH3tmlC6ELGqU1+cLb8qR4OM+ggIhAOqf33c9184QzCIBahODIwdxvrtyR93Dvx4ZnckUksH6"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.3_1582009810988_0.44006021254484806"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.4":{"name":"@wework/react-floormap","version":"1.6.1-rc.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.4+3fe6b18","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"3fe6b18bf9c8b55f77e274534088a6f2d60edfc4","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-Tg3EPdBUo11n/KZnF0X3QOMAyn89raJr7p0agHT8lIMErGbyxVNrGHbwOjiijxmTRRhj5Ta9165eeargMRwgKg==","shasum":"9491a61528795fff32fb9d6b25dc2b0bd47f5ba0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.4.tgz","fileCount":11,"unpackedSize":238773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS6F1CRA9TVsSAnZWagAA6C0P/01o/QH3kMYbYrdocci+\nTQpk9CDoO3n/dqgJY24WunGE2vlYAH2w6oe8836nEudCsOcprX0645gENr4d\nSnzvxMEm0Gja2txVI3qLRXDBNWdfSXKsfdy27H1T3xRhIL06myR3K43+TmcW\nnMFh3m0bTG3paZWP8A2VMsnVLtqJOl4vPb7AdOgdiCx2wDI6IAuLUazeRkFR\nQtR8FClHShzToNRvNaFudearUjP/O0xGGZ7bn5JA3SodpPP1NkphRqsE7wQU\nM+7MRxiLU4QSdP9s2CSyv6VFhp2Rvf+UU3vm9is5ksPt0cZoZ+wVu1HqyTYI\ny5YeB8XABu1TWSxoDIDalu03xDgKotmTi1bjTh37qlRn/Xaq1z/APk5X16fA\nylYRaQs3Pz20bCGrdTILEUagvD8UxJKOXQDqt2btMO6FuCt7XciCDvjFj9y6\njAVGG0M2b5PxQiSiKVzjyJlhWH26AeOER0nkuoXaZCL8iDiENGTGAQZMO7GG\nMKduIy+pFz7oXYa/HF8G/2iWDt6Vlgxpam7l5R3DGTpYkm7lDL3lOr6UHUmp\nKfYzQMsnxlPKQ4ZbrlOK7PAH4p1dpfCfb0yqYAWj8BmC5gerZpkIddibMGk0\nTp/GMGnuUnK5VPOPa3wvCdh4teQ1uHzYNqbls1jmH+b1eqfgbf/STalFYGwt\nB2EX\r\n=3lvD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5wb+eAqEJBLlylJkCrxsI3bMmah2g+fsjW0tJPRth9QIhAOsaob8TttbBlJE6bU6roUmsOOLG10h4XeQuBnt3Ogg6"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.4_1582014836655_0.2523135867706485"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.6":{"name":"@wework/react-floormap","version":"1.6.1-rc.6","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.6+9f7fa6b","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"9f7fa6bc8e0d0b3e468fd06ce09122cbf869e5b7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.6","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-Hc0VtIKl/Lrhwgz+Pm8cQQiAew85MhDz50pyCLBl57ZoUKbFwfLlpPfGvUx90Q8R5rhb/ChVZOLWMpUMhLYaaA==","shasum":"e6962bb0a56744c8c1f1b19f037dfcb3e4c0a286","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.6.tgz","fileCount":11,"unpackedSize":239258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTOh6CRA9TVsSAnZWagAArRkP/RKadUt+q2am6RFmAf02\nSkcYl92JbwpkJsCD2Ev6+K4KI1+jz4cHkZowjT56pOLWGsxos28MNt9i2p3S\nd/R47bjhJa+eSUqshVjNBlVSUxKXEjxqD+zbzaVHAUZ5S+AuAIj1R95PsJY/\n0B26N27bywd0astZiu/stTZOKDcVEd4pVkmbue4Kq7Sy2A+aEWcEBW2PDbw3\nJ4rTPtdtJq+/o2lEbMBX5BqDesw2kAAqSy1RbIj83AxZ7aZkZD+BoLXYPy3x\nCRw+6n/+OcEXN4qoIXbnyhz+zuxfE21gAjeJRBvpHc9PFeSW76GL+Rj512mJ\n1Wg1YYHYawo41up5zDKdm6/lJKLc3wi6aEOB7tfZdKsbdBbSJBAGzMP5hFY4\nYVJ34EXuQxY2Lyy3dAT6ZWlrjOSdpR+HN/wcgRTz+N3gAV5oSEZ/c3P8JkVx\n2XjMsOuASJVRdW9+cTYLbhq/SX194nD33hHDmXoMSdDQDCLk3MOgmcxR5WdR\nNQgUf780nRxT/CTpkNXGb3+WDBE9zuCRv7NYzHpcOz8FhnKd+zbyiu/0D1aO\nnoBiePfo7KZC9VNGiQp1H7IkbngMy2lc1RrT6d90ZszaU1ENvPbgmQYOegr0\n6sFLQzJ1fR4aUy9dVvaPPKBerepcipkwYO689BQjvSCkN8ViW5Droww/IYsC\nr75d\r\n=bBLY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2v+jYlpu8gmWJHmSrHNJt+84nVIAnp5TjKh4TwmVZjAiAKg11WknnW1FH9sukH4aGXiPihVoR87xVrd+UNyu/0iQ=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.6_1582098554116_0.8998504875260076"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.8":{"name":"@wework/react-floormap","version":"1.6.1-rc.8","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.8+6f11fa4","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"6f11fa45e8d55d8509494f8d2222e8c34c3e5b02","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.8","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-g1evF06Ga43/5f4hPw4PbuTd3QKEF62ZwRnFnJSgeNa+iMkgdwoe3J2AL3Tcfek5gSB29RPmtvu45X6gDGRpqQ==","shasum":"0dd7ef265f78ceb52fe442168d0c7e9366d99f5c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.8.tgz","fileCount":11,"unpackedSize":239258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVPI7CRA9TVsSAnZWagAABrgQAJ/dZBbyvRhNBFidTdTW\ngvF9lKteEVvXeu3BbGrjE6NX8ljft83adL5x3BZn72ZpU7pEXQoPT7kev2Ds\nZ9hVZeUI6YfwdgDQkFhDFI4Xb4G5gmiFBcmO+l9TpDd8ruvhvBOB8NChacSx\nD6CSa27aIMzYEPkqSeTRQgnGdIYUJgblVDD/VGIJf5OGTsfmQ8ngE1Xco8ce\nHa6T0NFhI7nuVji1SFDSBhTD8nwEZcDMAgzpi5Kp0bGONpB3nLdvCEPIem2R\nm8dLHofVZTGWW2cEEOZVLAAL7IusveXmIfpS69z/TRHuu5zlFDezomOrVA3l\nP3p1KgIl02m/ekIeRGZj7djt27Oan/BeShFFYadodafE4zdvEsJ0CIkkT3lr\nM5+TIRChxAub/JLq00B8N95/mackC+NUIHIReTfdgqQ00Ms4k4TlmtLwuZZi\nPE9hYCoHAa6T73byezjD6uorAtq9KGfW6tEeik14i9RdjvuRuQKK3a8S2sy0\n4+N5g6TIMnAPoHqNyXo0ZJ5Wqppd01rSnZDK5WnoQQ4Snsdng68T0m8kckPX\nNfpy9gV6w+SH6UW2gmIg0LuJh0pV58oelSD1xbWr3P4vHFXduqON5Rh5kPft\n5ZCLJxpqCeW7aYs8OsRg3TEGKvU9qESsqpxSvjqIyyU4wEhu2V8Kml+q/9Bl\ntntk\r\n=6559\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWGR8Z1NsF0OE7GvbQWrQcickvOQTS6oKDPHFzTP1WCAIgU3YnHulmRH+h0Swns2ly/sl8ET8ThP5OvvYDLKCVVgQ="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.8_1582625338858_0.07493820913618277"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.9":{"name":"@wework/react-floormap","version":"1.6.1-rc.9","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.9+89030e6","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"89030e6decec080c7c5fb81c38590c0b00756ff9","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.9","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-TJUTKvg/KmhVgepl3tGfDPr6Thp1ZeruoXarogIbTXQXTHa5MYkgyaKbyY1XSq/zm/kdNY90HZe1L4BeuYEibQ==","shasum":"0f8d869e4fd7950a0dc7aeaed128a7dcc744b342","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.9.tgz","fileCount":11,"unpackedSize":239258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVPwVCRA9TVsSAnZWagAAAusP/1q2mtiaKsjbmxvEbSmj\nYt3WB3iFGFTx4hmXoDXBl0esmAGvQf4wVow0X9RNxAdNl6EUHtWbcPGD9LLB\nQlXZC5zKvh56nIt1JYIA6QC6vXUTtVkdbHqV2kLqqFm6lSAYmHBHXxb5Suf2\nvhmatwBh4IZucMxYuihmhpxi2ioG9vUoInXxVU1qHcuwkkoVU4HYPCqTZg+u\nwCTluBK0blyXWECIF9tfd3Jzxe2B+u8UiiRpCezJia9qtklk710BTm+Hv6LG\nJcyBONgSL5fMOpk6rNbDju7jPCSlr7AMFz1jbavPYtWvmJC59u6jQxdn+9qC\nrSCZy9Nm2lxR3P8xM1Qa0vBQTzVAqKfn9vDo1FVOD3EUzQqOEeWhCSNC7By2\n84SlLLtTpDcvMMYJYySbnfpoMrxQytTfM+f1tCI99QoBcTQKI5oM92aqtuEo\ndx/FjbZjJkCjjgl7yoov/ywLdHTl/Uz+VsAO3iD+jl/f5Z28jUuOTZJ5NGC5\nQCu6iyiIwDHt3jSvdNfydpgtXvTxZFB3dNsG7R/5o/FGEostNPWkfiOdriMT\n8cdpuwd/9zrFYxvfhInPAJhClHcaBglD4CGonh/+TfouIgkcQBl40ZwIOMHH\np3bOf9xlDDBgb54TvOjePzaEimw8vHvaJMK3fCMQOZIz0cfEyd3JkPXhFuX/\nwVqK\r\n=4Hx6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQbs9tAK/6fup53QDWEGHzQ9yZUs9m4oWGeTZclzgOUAiBOL5ZSEnb+WDL9FoP7PwX8Oxyo6QDRfhH4B9+sipFt4A=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.9_1582627860714_0.8262590201881364"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.10":{"name":"@wework/react-floormap","version":"1.6.1-rc.10","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"3c85b339eb6092e97ed1bac99eea6bf25a2f3131","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.10","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-5HSKWC69/IuKToyU0RmM3oq2+nCng50PXeFLxdUm4xR36q0MZYvPqvy+YelE5YOM5EGKtasRb4OzmBKj15UeJw==","shasum":"7f8410d513420b8ab2851a974175de879607f22e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.10.tgz","fileCount":16,"unpackedSize":268984,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeViO2CRA9TVsSAnZWagAANg8P/AynV/ZePJUDQWQif0Z8\nutFdAmVptkVpbIgvtkK63OnLdP1a89OS/BqBWYhioJs/IxjKHzBRXTdRaEFn\nFZtWbRee17GdLnfzURBcQQY6rZaJ2Fg1mS61aYV29oUzNbmlk41r4deJPfx8\neY7mjLvTCXr7VklxFOAgqDOjzaw1BIL19RCxUZCDObl0eRS64tuTeeAO+ufz\nnPMfLdXqtHJr9U+Jg5rt/+adLZyNmagSKzUks9o1C5h98WHVq9N65b9gvBLm\n9M7RywyLxt+C1XbHDUYYqs8vk/rRTzusx0e4Rg9PL2J7NF2oW9mKXT8/24k2\nNIDAwFU5Wu5cHQh7gER0neChyxUbxd87fRfQQe5G3b6MIy8VVpoSwrHOiqWP\ndSxZZ5fTiuaRYQowq5WX/0kNLFIYG3kdt+8Z2NjzVMvS5QuOabpcPzT7ZrNj\nmAfQk+NrW1rb342GzstJ/LdwfnqEqHoU1DEA2YGn7yL/fRk31R0k5fGDb8o9\nqXdmweXZuF8RBL7jF4NrqI9zPCATKcT+TliAHDkGb5BIuvHOTkkPgE1Kc/6u\nDF1cwuVBe3WdHseQKdIg9bdXhGQYM4Mb85EbqHSxRAXj+bVJSLk5r4Pv++EZ\n+tkXcSiubCTgaj3dxlGBlPikCHWre2G0Jh7jH8yPPFr6BB27Ea78QU2mG1FT\n/K1e\r\n=ANAR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzgdBqip7DeKWb7VXC7GZ8xbT+w6mszCA99pTG71sW2AiBgVkkcgx3dOGINuxSdutCMDfVc/Vfcv/SKI/OJulkmww=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.10_1582703541842_0.812785799326313"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.12":{"name":"@wework/react-floormap","version":"1.6.1-rc.12","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"7989ba34be2add5ead81e5d50bed2b6300afc0ae","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.12","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-bl/O3ZkMgy4mKGfDw8Cxre5P/eldNt8zWjIq7zKeHEg9V9m/VEz2AjRSdNzZ+OEWD48UOXFKAhIJbv6t4qULKA==","shasum":"0a9899848335f2277f13ba5e42b687d0b258b799","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.12.tgz","fileCount":11,"unpackedSize":239246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVmsuCRA9TVsSAnZWagAAkTEP/iFLcMMYxjk08Co3cZkO\nv00tqT8fEnxk6qRmMGIKF29EESBe4cfBYXAe6vmpFkQbZv8p6U6V6rtt08KG\nh/xB+dw6fgx0vl1QeJAPwFrSzL+92JZfQ308GXRYx4bPNTkfJnVFRyGeMKTL\nZLE0nZaZmZF1P1Fn52wkbcHTknZ+x02Pv+LuXSQosGUeAbsszPLUSmkV+b41\nnqiKf10BiJi9dourdkdxOe6S9Pi9Cx0IqXV4U59J4glsTc+dfB44iOi71ozS\niodcWnEWZ6AjBtCmsAM8iwQhYngCWJ7g97TkeWFLYCA7xNKSW/1leRmr3y9U\nwdZy6guWbhJ3GWxaTKjPhGcXIcew+g7zQURb4mzqVHiU0AwzarOP0AN2lThh\nmFLXrTHaoHJJuCAZyOda4eeBPYDCs02Ae0yu6kqaYZxfZvVy90eZ2exKWmoA\n70j0dGf2D80JNi957dlyC1E74wHbU5E9Yl7fzAbPtK8ZhX1VrzpTnQ/sMX1U\nOh1PSEpQoMhsum9+TjgLhjlCdrvdeIlYMfGVqQy8PuCDq222KqGcUU+u86OT\nJ+zcZKkaAeNYv6ggt3lzbZ5qFGvIHiXDO/3R9j1lvDtzxVquVw2CfmwWI7Gj\nN9zUn8qdn1on7NHdVe9YhJWHp8XCEITECth2Q2EV3uXwqYEAzuT+5DnmUEcb\nHUOS\r\n=U4vG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAX7KuqEazY6GDmPKAiicbVKFsw1kniHP0IHLLUToMBAIgGXot2t5nph6s3s0Dkn5Jf0Nx3vWotqTDeTX8z7CAm5I="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.12_1582721837663_0.5047826657171757"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.13":{"name":"@wework/react-floormap","version":"1.6.1-rc.13","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"f56e84e5a746624592d9e73216faf568e46c145e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.13","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-ofnnnv2wbDWvEhpiZieMYA0i6Bmt72U1TuS9ywTAzOr3ylqoHZuW8rWKhAOH1cl2hAT+FD433dDnazXkQjjJYw==","shasum":"86f89845b434726e1edeba84884d7ee70003a99d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.13.tgz","fileCount":18,"unpackedSize":269561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVy/2CRA9TVsSAnZWagAAZJYQAIRuqyP1UOJ38RnXeWQw\nS0LSUXCr8EY/fr5FtIFZBzcy9DCj9F6OE/gQ+MpUf+j28AllVXa92W5JX3Vm\nMbLYnS/NGxuq5HMJCJwBxurfqd1P0dRn/KqX+/vvCgpaPS+Gso89SkQgLtTP\n8ig3G0RxmXyB+M04q+YQr4K0eokOHBTCgfVqmXviEK08jdawh8kmRnQvtAUl\nkIaGVRF3Z1xuhv/sabeabN/2yY3kyk0rMWujVO3qye5lAP0UEbAe0YS7w2Or\ngAgni6ABvissEeDhF2SVLeeAhgoURZ0ttnhWYp3P6ofs1KVLfdo7ioFq2o9Q\nuP0mCQkxd1kf15yWqHu0DFerGUWYiv0GyW6OIf7mcE/Haj80sDOZ2t43eDj0\ngHrUHfFwkfgOSSyHMFuoUrMOLQeUtDVpS19FnDeAaoV6ZpqCgcixHN7UM5s8\n2yVw2zmslzz+iVhz/8uiiPjnmHMsFM0qfHu4I4f4ftxh/YzTcPavrucy068f\nccdWbVlE8LwXGof0iPrLlqdScLGOOlgmi7ZztDgZqsRdNXJEQW/tC8C3YBTp\n7x2FV4v1LX8qaGwJLDBA7a4DBZm3euwNNhJreYUn7uZ8OxrFLgbhSjw3Cnk+\nt3KE0PElXEYcZzGvdChPgujGwG+Y0XGThudJvqF6aUhbG/TwruJ4jYg2hIr7\nh1xp\r\n=s1+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXP+zedU/t+e7vRzPp1gumOUHUperBXTeBnH0UaQCIgAiEAjYyoTSfVncfapK3/BK2/JwDKi1OCLgKw7CsDBUmBnR8="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.13_1582772214099_0.5575231635176479"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.14":{"name":"@wework/react-floormap","version":"1.6.1-rc.14","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.14+706c2f1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"706c2f134a6fba0f3f6bfa3fcada6a0504163884","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.14","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-2YxB7b25UZdqB/Q9ZoEImo4C99ihEHYVtHNZmjj8p3krxtbherwzpG9w233WpQtz1HMx6lov2Q7YxZqXLwDpHA==","shasum":"e3cb38087f6b8f151fbd1a1843e7b197f5649c3b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.14.tgz","fileCount":18,"unpackedSize":268467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeV08WCRA9TVsSAnZWagAA8BIP/iV1OG+xTHtb0LLYD6GE\n0jYPFEi3dGcFl6KLwQjIjT0kbPdPTAJuxnUxi4WLV7CrBdfW3k+/IGE4Dwx0\nCrkMvw7oxv1VsXU/WqMi0DpelgkJCxomscLDj5DEla+IPealamchRwjbE/Q7\nbpkcIjIqSlVuZRTuwoyYk/K30QYMCJeK04VpCPm5gqGxEsKrNa8+AQR8tJkD\nbbQW7O7D2fI9+Vbcat/+9C3lhPKagMv8qyiyDt+PNpcq97QvjyPJ2/YemNLp\nCNXslldZfFWhy4uwEuLNT3L+63JDUnm7RefFq3jDagtAANjZtbqDSB53o1T8\nhvTO8Yzwr+DBEbFP1EBBWt2PcS7DewiupcfLOtbaqoxBesK6SUJFUQd5pY2L\nMuBCBs79K7mh4AbF0/zg9gwhe/HNs8DRC9Woa/0hY/8XQ5yDf5sY8XImrXdg\n3U8K6kMIZQIyeFSPuKC1FBQ+dPME6Dki+kNiqneNkiuZZIw2K7VIhlWx17lP\npjOylcuEpRfR5Hrisu16CrvZPE3E0T8RXwJmXJfHS1FZUH2PdsK1aq5NjmHr\nzigSF6sJAwx1Bnd4EvBXqvTsYEaTvYtjzcrs5coSpcFeUfVOCj2XJtyTEeYl\n/nVSsIDnwQDtjkQuHQRmXZRaKZtR7j8oK/Cq/cqk3YK3hhomB5FS0A4laaPz\nG/rU\r\n=g1/N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjuTPO5qZVah3DmWHSjqic+zxNdhcoQvO/L6vAYngyuQIhAJroAQVYUr1P/zvU4yTKDX3CjhoCSW3rbjR+hLDamxYR"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.14_1582780182276_0.4898660072309551"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.15":{"name":"@wework/react-floormap","version":"1.6.1-rc.15","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.15+6bfd9b6","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"6bfd9b6c7f6ec2cd6e240691a53ba73b75e3d77f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.15","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-yG4NLTBHz6L6jXw+YxLY//RhQ9kiaRF3AJIleGI3np5qn4ViHKLAVNoOdgDfH6MTctd3IiZ42Lr60SVQesXCsw==","shasum":"fb2a2405c1a00a24110869b6057f993a5619cc7d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.15.tgz","fileCount":18,"unpackedSize":268467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeV3l7CRA9TVsSAnZWagAAaHQP/1HBYeVr0KnsPY9aUcvk\nZ+Nssl8yBJIMrILXgM4jo1b/sKyKsOtUs4fZxd+YVUrkQEr7YwheUqR1BbCv\n6qaybnhBpX77Y+pOot42Ug66/xojsj+HAU0cslqgTxf3aAJs7KEJWfzjiZpW\njGRwekNAyt5Ikn5mBC3bFJqiB8hgsR9OjGMn4DCNVhfxPvpnP1MVjcUaI/Ww\nhogy9bnL7vfqkRqVRoLuXHGpia2ubsXmrQauZuKn5rVkhm/irckamgg4VbRh\nNm0phAUhpxRqo4NwOJVhdrB3LaOIpCZGVh1fVLLCgwuFIub9Ylhphshebfat\npbEncksYt5yjojcBgyzIokoTyqoN8+up3PGTMlOnwsmpiSPwBqrJMCERTXD5\nLA+uT9UZjTrpTB94oBLs6Cu1WUaa2LMNd3flXJtG9EvtxWveVAFjeC1ZCS2n\n55eFVyYcl6jOkEdUdFs/QdVNrMPrygHgKy4rrVnmFkarUmLxv9IakaNuf2u5\nLaBDvFk+36lHbhPYgNBRxSWjz4eDddT5f7ofcxSpwz+LAdnWr/FFLS/JkqXc\ns2BnfijREXyrHlGmGB15LV+QV1gqkN2W44lV2YMs4vZstHBp45cgXnmp9CMr\nnWU6oeSsygriZ3UyG7hm82QlD0RO8bHj4NUMpIZ9DVLEIhYC5HDCk5jqhPCz\nd1TD\r\n=4Hhe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyMLJeHmxhlTujO96uo7vjv5H64GNkq8Bz85xlmD9eQgIhAKPASq4ZGMoSj/XWSJgyBZ4kK0/pWz7b+sEE/z7rQDyY"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.15_1582791035037_0.5732281677829216"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.16":{"name":"@wework/react-floormap","version":"1.6.1-rc.16","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.7.4-rc.16+9def20b","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"9def20b60bad34f68187c10ccba3c2f0eb1dd032","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.6.1-rc.16","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-o8zV6Kp3ArVqWfxwV7bWXcb4hSv+ZBAESWanDCGypClJl6VlHs2qG6sKRS1cuQTD6FPFLR78ZGm7SQUBHOut0g==","shasum":"66ca04115a9abaee77675eb7af6886553ff177a1","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.6.1-rc.16.tgz","fileCount":18,"unpackedSize":268438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWIodCRA9TVsSAnZWagAAUSkP/R95RsHj1UawmqXSUNrs\n5AQhclfq3ndj1y3amQUj1z5/lGt983Ry9QcTS4VwzNjrGKK1Ac3svbpDgZD9\nZLiQf23S+idGv8QFs9ORUkehpLQomubmH8Trlmf1qKWMEleX6jX8N61eAaaX\niwKPbjynPp2CdcFxrio0bmP5NNLZ4P0MiEbxxAbG+fQrcegOrzpqg+5kgWhk\nz4vKnrk5jhtU3PpygpPHsMUfM9LOP38bmqaUCOMcnoRbD2YPgha2RYxvNDFc\nN64y4tcdFf1oTJbwpvzsyUMfXsluzfs2FVCkF4gnouDV2jjBxSZHQoefrFz9\ngztgvzgiaOi38hIHl92ipyu8VdkkW0LAc1rR63YkSMvF1gDhlvaZkLzw55jj\nAE7qxhQLYV8M9SjAOyhhzVziPqT4d1yG1T8l+/PW9AyPo6Ll+FIF8qBo6IlX\nnhiaMCQ8Sdt2KQDAXVXb+vgakfHOqJ53aHfLcnkPis4FlomlT3OmNu+qaJ/z\n7Yiik7pcYCgGT7IdpRNEPeoOSiZeMkqRQTs8hYg6Q6usQ04ThuQ7OiPujWz8\nXckZ1Sixr9scE4vMXCokFJrNSqCLOoPUflKUNeDtcnPYcPSsqK+id2daUd7M\ndDz10uY8f2X07N7InFCGdTuoCbBQ6cSebq8qweQu9VTSLD7dunWmVe+aDrFK\nweMS\r\n=yUIR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTA9dh5LJh9LMUSseN8m4KT6H/b9wLqKOMzuK75fq6uAiEA77KU4dMbbnC6cnapBqiCQufT2DYkUs4advQZudE2CwM="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.6.1-rc.16_1582860829047_0.18470958824167338"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.0":{"name":"@wework/react-floormap","version":"1.7.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.8.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"416b8d8a8e50927d6085e3e2380de800aee1b144","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-uJJblpz6lcGo+p3ObiCI6bhU+h5mr8VxjSBBw51b/wVsdsp4iqqbF9ZymqNSOUxWExznM7lwXSB1iTVTzuvrGw==","shasum":"fe6e0294d627ffbb4254342401ee746aea1ff9fc","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.0.tgz","fileCount":18,"unpackedSize":269292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWIsDCRA9TVsSAnZWagAADD0P/RceMWheviGU6PkFKcfu\nh7jQYtKYh1oRF63UP3LZpRPA6LG/YAKP3XyrhJ5K/nGsK7ARfbJyRDkFI+Zz\ndBc2qT+xA/uzjLMFMGZQae0XVzX/IuGf2cxtpbErkTUXE1K4JAcIF5aK7m/I\nSDPc6dhx/bbI+hvkQ4ocS0YWzIjMooGad56Ztbmb+sgVygnz2n2AGizBt4cL\nmcDNe7AkPfpnTVLkf5wz8ewchmEtaUCEmQOkT3xB9PIk1HVREq/pu7vUkdLz\nN9ctsyfBGYZ1AZiBZWVowNLgvxjiH7B3nBbHzVqt1f98rdaBmli07KtXJeFU\nym5XAYyP6nIZ4E7FtismVBDhaGsofSusyldalusl/7Iit5rcQi2U83c21dAs\nPALjZpyxZJ0gwU+flTViCTHH4D9Tk0ac0Dtlo8HQxPV84/DWL4tTohsY7P3s\n77scqT70ibBsUcaova+o3j/f3b3H+XvNYcKgZ4EQ9gwub+TcMBEbuWGht1ZF\nMLfCgN7W53hToYrWXpxlb7lN+af66+BzxmBRhxF1MDXUUGQf6tflVFA3lj4c\nEBp7LjCaOkvoTFAEJlFCuTBqt5UI9auARnUSiLOf8Vy5YTQAkaYfOOIF5lq5\nKCKGzMCyh6qM8Z92WxH37b8luS2djcw9ZrOfBI6qj7YfBbBPO8jjkrxMcvOI\naibf\r\n=AakN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5kjUh/3aFfENjPHqDmqkNP8HBWSCBO4r/bdiziGHzlAiAELO7I7YiOBhXP+AY4sx7cXJ5FCZxMWYZVxfAsBofASg=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.0_1582861058974_0.3650509115884095"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.1-rc.0":{"name":"@wework/react-floormap","version":"1.7.1-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.8.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"69fa8592c610ca8aa0c1ec03558c94e6555c13b2","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.1-rc.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-lmdJjjKgWHCtlIcVCqB5yEaiIg6AmVsNpCahommPZeNFcHhPqSV2z2x1rfVvCqmfA0oRh18w6xmoU31AvI5DhA==","shasum":"060dff9cd1d0630a293eb44204a39a27428423e2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.1-rc.0.tgz","fileCount":18,"unpackedSize":269244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYfDZCRA9TVsSAnZWagAA8mYQAJz/1CGjLmPWHayFiodV\nPu9SNvoAoyNrpC9P0T6CtZEpRYRF7zmcgxTQxnSFuzSuHQzv7X1VXO+Bjyqd\nCesnnaQXRxzNzoHKcvqrGuqWtcCicgczWfrLo8MYut+eMaXeQwDkvOMsM9l9\ni7WGJNxgecJvgWWmYap0CethDkFXiOtQLigRDU1zfnClNeEwlbAiqwJ5JciA\n9Lx1l/xJYPDPfatxfNDp1c4WqWrwpFKKQo/CEjUEis4yJdgOQolSCx0wLg7X\n83SpxnuC8kJJr/NVFS9w2yJEW6v0Nyh5wo7alzjGC06q7Sl9oyPARAujjOK1\nBLh4Pdw2rorGF4XMn2NC4wW4sZIgR8z/DglSYrEeelH9+mxClBuXW3wow/4o\niWp+Lsq6TpAp16oJqJ3qZYWOxHfIGJxFCgMdLYdOW+geB2lvOLOksfftP8Sj\n9Ey0ZIzcMOae1ssDKT1Rz5OOsjTpQDRnRqyRpabIUNNL0XP1umNCqvMwKT8s\nahI/xzMQby2+FG16Jpcgh0TZnU2l40E7CaUSk2JQxCUsNypeNE+tkSsw44Yz\nVfQC52/11/MNVBoX6+7dm4LbwTHtSY3+g0Pm9q34jrgEap1YpF74Ugw4DAnm\ngPwMK+igARXDokdAgiwvfebeybUwXRaPbUmZXRuq0DhL71xBc/noXvAGLuYY\nqQDK\r\n=Hu/7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4FG2AbUGsLizZsvQ5lJY9J0istWPLbtYtk30JLYDp/gIhALZNbbBnoD8a44TOTPtytJGT68Owu5b8Dm5AMp1basMK"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.1-rc.0_1583476953447_0.13601628998879334"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.1":{"name":"@wework/react-floormap","version":"1.7.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.8.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"3dbb27f7113dae39b468620e45b1c4ff828816f4","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-PUy2yFS/EP/xfUMTLCjQ/PAXcTf0vjKcXAxXmqh6Y5f0Zf2qIJlOTaca+zQ/QFFWMcVWx+xGffIEBdm8dxjRQg==","shasum":"4f8adf7a40d2315e6cfd860686762882bdbc6fc5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.1.tgz","fileCount":18,"unpackedSize":269616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYfMHCRA9TVsSAnZWagAAwKEP/2DAUpfKEC+vMKXqkulR\n/h5guiu3OWyWHOuzsrjWVNMQekzOstBCSAOyXbOhwHH57EjLohwfrWoGeeWO\nNoNCbAVFfwS6JXmIbZNlvlx7XPdPiKvW/AsM5XeybrXZUSlbPGj8/r0b7wwW\n/Zlco48re0KxEVBJOfaopYFAahFOdCaQAX9FONY/fKVy4QgPYUyXIrJdYU5R\nMo43BShtNjPnzu+U1qdilMecdEJ7LWhvIM+BHMAjmw110XftOPk95UgkPEgp\nbswzrsa8jxMXEllG1HjCducj4Nf0hM/FlpY9TOXhPXhJAv4CZdmtXeIMtNcy\nD+9mnjORY3n0iH6EWIS0dc3YrNI5P1S08tUaBXdh00+yjE7v+WBCuiH8wEdK\nxueYRQJ4B7wfNOFt1G1STdzoOM+iuzV73q/Ay1U1bN7J9L+n+GrTYrlFnymR\nR0d9FymQu57lIYBWPQKRQ8IMWEGreWE7OvVmA36nXJ4/R8LHgJ1Mn6Uu8glw\n1YvYhBcjkdq7mMQHuo6zagyhIDC86InmAO7Fiwu980eVHgWhxFexKCmOyoyQ\nZM2j9tKsj+g5qKCqo0k7uLJ1RVyK5LN8NPfCioVXAtHtV/F8cDhBCmzZEvmB\nYhKAZWgoJswDLXZAsslBnb3bCd9L6ZuIqxpghAQHG3nZQDDpbhu7IRLEwLSF\ngX18\r\n=/AF8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICE/gqSY8KTPY+RezZccw4NT/fCRLBedrzcvZ1ZFKKI/AiAdoH+wNj1KNqdag2Lj3ts2DmzHDZZH7S1eSMJ+nLPJHw=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.1_1583477510598_0.6087032722440571"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.2-rc.0":{"name":"@wework/react-floormap","version":"1.7.2-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.8.1-rc.2+a6317f3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"a6317f3e748b8f29ead2fd7f8fb0555ff2787d95","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.2-rc.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-YT2gZEGLKT3QJXR4jc1ER6xISpjQkKUlpiDZhUcTjdpXpINFxNg50ahjLWAVNyEia4m6mL+ysbHmxoKNEPXzEw==","shasum":"4c4bf8f7b0a2356db57740cfb6cf5e36be96d73e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.2-rc.0.tgz","fileCount":18,"unpackedSize":269642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZMLUCRA9TVsSAnZWagAA93QP/2wDTPLSWRB3ChzfUZMf\na3rQ7B+SAnp5fOF6ovzqKqCRPSy1sd8FNiOka1i1JsvG1dh6IvjnsSF1ozXN\nfOIccKDnXcmExJ3JhUTq01Kuc/4vc3q5beKSQ79EAFIxR+apMQq6+F8gSrOT\nVVISxqyskDqignauKi7Z0jN3rBhwUAq8WZefkWzdmXMQUaMinUSTDrNqQAWm\n5SOudcTIZ1h7oEz6T6TymSkq1NnIP+7+MHALA6uv8NS+2Y8CJeHu/hnUEKcb\nDkZh+LwWcQNsi2DOvp/2bnC1L+fniXIpiJ5r75bAiYCarUqUKf95ct+h7RBO\nmY3st1WUForL74a+v0FnFU6D0RoBbr0Zf9cmxVfwILLjCQm25p5/tLcjFf18\nENYojUVw3VCcPGrPipsD2w7zNGxC1NodU6JcTyZS/wO2IB5Yi3OGqivUzW7A\ncqOPdLr6u5ZnYJzmqRMYDCH9SaxhV5i+mnu2HQhcWPLekiLjo/odN+nnIyu7\n9pV6s3rl35Cu4jZ1aErfQTI1FK2361pI7EJ6afVzS+JPkSSUmFLvRXrEAhTU\nZ/PL8Yj2z9J5SKGU1YYD5+l4QbNEV7aPeLePXJHy50lFi3lW6NCrKzWSlThE\nCIKjKKgPw9CMWsBk228/oqG1kJsB1EnxPGSRUd6OBWzjggRC0/PmyRNhrTnA\nxjdW\r\n=V9FU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmNHiy1rBcKwLO1jcOTOkpRo+3zZ9IrfDZnzdY7+z9HgIhAOMvIdKr4dD09wip0emaSoujh1o9/fCabLy54xflVMBx"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.2-rc.0_1583661779684_0.7705305246603247"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.2-rc.1":{"name":"@wework/react-floormap","version":"1.7.2-rc.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.8.1-rc.3+ebd4571","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"ebd45717b35869927e99dfa13feb7601715b2aa5","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.2-rc.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-w6tFHNz8D1sFMUAw/F0MvWr2/3Et/7L1ijfgiOHY1GB228FpdVYVdrAZ0iLMzpU+wTY+tWWssK/tcv7ECw0o+w==","shasum":"7129fd7086c4f5bc36a49ccc5b646c4742d75b1f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.2-rc.1.tgz","fileCount":18,"unpackedSize":269642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZdwbCRA9TVsSAnZWagAApX8P/0CTATYoA/By7/xYsoSH\nnKTAxmC0C80NeTeKFerIKFCi00rSbpZexqvxeQmH7vqRiPHR2A7l3SHRsyM4\nznvsfl8J2u06qF82o9U2aBK2bEf82+UlUHZTKeIPIAAceVeFOB45xxWB/eTq\nB4f0twjom48Gix3Dam2q10vT931InT+Zvll/HoKxx7QN0mAkd98VI2jAO5I5\nQRJcSfLfWBWCXSjyQLmaq8+gt5mmykIt9zR12HWJWPiE+QHyTcKfLsFalEaU\nBAdNpoVwhXos1w+/bz2LBYtq+qct2wB6iZvimwL5WdoZB6ylED4AmmQR1MU+\nscqbEl6JyyUOweF11NXhlS8CYJ225oSyuCuZBUpik2+Cm9eTvhQbf+bPHdeQ\nKCgrIuSImqoMU2YUc6AZga4Oz7yBiIQGwaaeZn15BuxKXRoOPBHd96c8NBCk\n7/tnrPGDKEpcXniSq7f35NLYnQizVpcrftl1NTm3SPTxaQB2qLuteWDVDbjo\nW/We3s3Y5npcRJDc4WgPEs0+FnVvaNOsiKZhtnhpCv+O60sZ7TP1q0CYuWW3\nRC/qwkzASuTbzpHQxkrBx80mOGRRqZQUnuOE9vCI3fkmT/ZnvDViHCZFSJRW\nXvLsg4UsxkAl41c3vlrkho6YxlMuWIB+tcRjNqTgRWVf0Wgza+yGpGHuYdEA\nUA4p\r\n=EAIb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+i9nWIxzqZjPSxO/AxI/j4QI3E1D0JlSOk32FssxK+AiB9ARzV+DwwhTsCMO5CeRbClxPeqzDDfgu6oH4kRAiufA=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.2-rc.1_1583733786433_0.5880426688121061"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.2":{"name":"@wework/react-floormap","version":"1.7.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.9.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"7447de83c9090ba85ae9bf97be8bd82eb34eef32","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-Jgn9xpbatYU/KzAhZBKO3UtPWQ+mWEjUxiGUqQZPoHlg0CykHDp3bKj7HhyL6WErvcL80E/f4sQKLvr7cnTdRA==","shasum":"84dd2090bd86b5749bdfd361a792adfb5229de88","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.2.tgz","fileCount":18,"unpackedSize":269825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeat9kCRA9TVsSAnZWagAA8KwP/2cMqBOuoq5aFyo7qXtY\n9GVeUJL8bBGywoaurNqLQsT9+LUMO7WTWqOW6PESSjQ/HOtPvlhm3ervqBoQ\n0FUo6gN8sbCNbhHiY3yBZhjLikmSOOSax6y4003sfvD20yjkR+CfRxvR2PlD\nfE6fuhS7dRYkcibXRwemGeuoHh64fKTuXw6Z/B/iM3xQSm02rszf0jTVicCF\nO1VdwfgMoVV1yZRVAfBlQwQXs/+7yYsxzshDfitgAV+GHPVGZvyfnv+81Rk6\nT1PT5xAeiOZ6IE3YJBB97JtkS4FWgjCcsRnzSLcxIg/xdrl4sqiI7uAfsWV3\n5I9lKInyuB2VOWIjHqC1LcyX7UbXC8HHra+IdpUfo9p2ymYa+2IjAceZ5MJ1\naEhuRh1UIHTDaI5v95RObcAWmULVbU+6wQjZriySYY9k+MtZRTI+fXjq/YrP\nnNFQ5/RqncomGIiDmPG9SVQy5mnAyKOpar6pthituHCjQGHEGVNT5Ev2emID\nu6BrsMFiRkRfrk6gCrfKzxM+apbR9A/Kv81RZBMp6uy+hY2yAD1bWxU7Iqvs\nWhVHbRh2HGnG3z+HvwlQTEG13vnGeoJcUW6jOiiEtcr41ZExBu1b7km15Oh6\nAVQhrFuj8M7vHxhVRn6MBSlyp5Jd+D55qVB7/I7q7F2xl+utGy/T7K/zDnx7\nw92z\r\n=zNjG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0oI+BlTRp7TeAFKfMh0l7zokqxB2LXJoIpoqAEjtePgIhAO5DPsic8mND/LZ9cSy4LgQihkqbVW56FsMA0/TlujG2"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.2_1584062307833_0.40274909169000406"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.3":{"name":"@wework/react-floormap","version":"1.7.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.9.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"02331a5d0bd6d548fd97c41e62629574b6ec07a3","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-g35cO8rH4dsO9cwm5syJt2X2uewB4LkrqWCJptgkY9BGZtRvemSwiS9dZob+qmo2WMA1KIayGJbtFhNZW9GcIg==","shasum":"1bb61d4e7ced0e24ae4b6dd81744c243f26fa004","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.3.tgz","fileCount":18,"unpackedSize":270034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecztyCRA9TVsSAnZWagAADcgP/iD89hZVs4siuPtuNyP7\niDm3mrhf61shLDce8+IStDQQarsfjbeC2twxTsbOD+JrhKZvXa+00Mn5scjb\nS8/Sn/OgwZ8yFCkBYbuMUHcoZdP9pmV7WwAQcl8RDTTukGC7O+1/3C2YAvCk\nXqvcyayhe21zGYZXeo1Ly2KneG2LE099ki9lxB2R45cQauZ6O0DWQbCvBqgb\nXNRjpMu/CgXHbNAwdmEpbQRsRyZHwostFgxNaiy3FDDKmsnSevzAB6LbtxUB\nmxKBoCrtc/TwsfJmRTjJWpNQa/Xtz440jwzK+rUgSMAeleg88IwFNy9TIKfX\nJrlQ229sst6uNxcz3IZk3IdMMMfLm5Y6r9fhXLzJfz3qZ8MyIdMw+GXQM0Aa\nasIEQSr1PMX1zdVFLq4QQuZutyXP1l5uKIFzluoc3kuVE0gYQRYCyEfTEyVR\nwPbP80bITPQPvPjLiTQu+0baiq5N3Qoy8GgExkagSsgtlBIuCJlM2LAHvBbL\nzPOoAEvahfW7U3CYbMEE2otrLlVzAb/qDav1chCIBIax8r7YNQG7DOOaEWOV\nZdcGt45XLt+oKtKvw918sh3dsSeOB3enIfxdjo47q/zzSfbijrYEjiNgYM26\n36m31a0dafPEeR40lhohosjcT0HVRK4f46NvLcH7V+QN+zMk8zYo3CnCsfKw\nL8FK\r\n=qNm0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCui/2RGGyRzkX1DG/Fqy4PFxM+PYE9zNekPxwGQWkLEAIhAMbF2bnBcmcMWJkWqTKLpM1taT2zAqUUgacDaNC3A6OT"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.3_1584610162431_0.25416385662932006"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.3-rc.0":{"name":"@wework/react-floormap","version":"1.7.3-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.9.1-rc.0+0181a41","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"0181a410499ece6bf24f22bad19c4b56fb6973b7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.3-rc.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-WAwzH4haT9iiVUgy1tvv4SvzRh7hMLAegU7wqf/7lpYSKGuE8hRJzYM2vspKecq7YZ6Ib09wWk8fbz3e0I24BQ==","shasum":"e31a1edd54a1bff621ba9bcdef2b5b02b90c88d9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.3-rc.0.tgz","fileCount":18,"unpackedSize":269851,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeczuICRA9TVsSAnZWagAA/TEP/jx4ZahM5J/NbPj4FZoZ\n3YVqVzP8ojX/AQ96Z62IkofeFb0UVo6NZR7TjYMXhUea3gg8PrX0twhaMH+5\nA46pJwNbLF5USrR6SS6AAat2zUrkZK5ftcQgoZwQlj9hk2SwKmYTgopiQGoI\nzfT9oTrzogpuM4VhHWYDHFaNI8O1az4bHDgB60bxBoP/E1kYui8ThJJ0qNEL\nsy5itJcw49g/aJotLcpDOtvkNZUIA9WQ8oHB+MJIkOwjAJ87z4htpsQr10/m\nMLoNPG1TbWvHwRKRCXxzY6lRLnTXPcR2lQaNad1OFkAqx0u5h2MujnTbmaQI\nlbrWzQf5ntF14qE8cKCqL92lKNxFvgbqKvqZLUyfTbb4KFQp4ppmgiZ4sDgo\nkTD6+GIntl1LkPgNLYYZlzMfV7CL/hh6vJfqdo4EqFDgaRD+iITWS+gwxu3N\nComKwjS3Iag6uHY2qrOcWKPiYoJvqs/zElY4/76+9PwA6iC7W91LKNx+kY3N\nKh1u2KB3iF7fFKLqH8EZGntW+2JSYZX08xlIGEMlGQvIOP34Gvjsr+pquQdq\n+uSPMDsRKaHrHS462vO5L6f2TGbxor3nPG3vB49XWzAQdqsbkavsHUmjlMf8\npfILdUDQ43DgbExQJU+jFeV2eCS98hioEUtlBI6u/pyrJA0IzSlnRFulL7EY\nIFBE\r\n=Fq53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2UzTm6LUdzqtpNo0MHWfpdSm4gLr/DS/xJ6KHqkR0zAiANQawa6S2nRGme4e4JEMDq7nPv7CC0mf0Uem+C870Sbw=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.3-rc.0_1584610183959_0.025825867737517605"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.4-rc.3":{"name":"@wework/react-floormap","version":"1.7.4-rc.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.9.2-rc.3+37621a9","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"37621a937faf9ee59ec38894ef6bd45dc9bea3bc","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.4-rc.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-cwS0ZmkD/zijeIdoEPPHft8kPzy6e61jeCUJVf7Fc51Q9w4uaorizQF+Ms6jnTeqZxAfe9eBtot6sFFuOWdPpg==","shasum":"00f3a8b07b4796a44887927ee6197320bf4bfffc","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.4-rc.3.tgz","fileCount":18,"unpackedSize":270060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeWnCCRA9TVsSAnZWagAAoyMP/jwZHVkFATwt2NraBsu/\nGrPV049rhktrdrEmz9Cuunwz/fSSsujQfEQ5dZ7pQhnw6g39GccI1hmVTv9q\nWFKNRvRoLW2L1kcwlimb/L76v2nYjf7ngzucsE9S+BWVFcteX3EdJdVbw3do\n0J8HTdTouo7sFJc8xBugoLP6+l9pyUn8hBtMsDLOmz+yqM42lyyy4XwDhtwP\nfqrHk1J1f81zYfgZ3dtskDxdJQdCOozR0K8mp3PhCVQgagd/3m4oWRfaUV3c\nlv3tbY8zk09BMIXymxiSVWbaU8In4mCTTiWnRFl7+qhxeQPlvYmak/7VPGVI\nyTk3cGtOLuo3fNg4O7XCQ3eJoAvIewnbjSIrPmIO90E+ocj7id1IJgMDWfd4\nCpm101m2Wd0TBJhO9LvlYhvjWQ+qC1PMNXuiKnuGkyhvc85FQuFOhZ33/HXP\nR3YMwKZa8S+75yF8umE4qLWiGa5ZkixQWChYOExcPNaEsQ8wshG/SVjgAbRd\nK2p6m5sIp8/YhvgREPsPElP9JmNd3TX0lVLA8tnrVD0XY71ULUa9FzHAvkTH\ne7K8yOnU3IL0mmbx3I2JV4SmH/nJ+ZjWt7+q8903w8Z654z1l4qJ+pOY/4WW\nP88wRUoSPlaYynmCGBtUedRjs/tH3iEAb+zvh5dU+dBnYfguBQR0c0oYIbpn\nzUAL\r\n=N+Sf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz0+8W9o+ZcUM7rljnUlT6ZJ666jrgXy6Cr9nF1DUPdQIhAJgPz2sx43HTtGCVXWsFS6nEfJKeCyerq2bkHcJd5jWD"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.4-rc.3_1585015234164_0.46161643015903797"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.4":{"name":"@wework/react-floormap","version":"1.7.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.10.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"488fac57c6b3520a0f07fcb504c9358898fb2d74","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-ZsgO67fv2ETeAwj+bTmwE4B42h4C3zzfRvhuuapiGRL3U5hwJgZGWRFyS/CygpfXMZMZfbvbELPMOXj2DUd2gQ==","shasum":"fcd18ce80a6901282169eb47ae07908f6d363fda","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.4.tgz","fileCount":18,"unpackedSize":270244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeuCjCRA9TVsSAnZWagAATicP/iMEjqRk/LxbyjnGeuH8\nheBx18qnLfJVqJ/0MoCGGWLcEeiTAcIhdLtY96T8zp8ObXzInRGdfCterPVj\n0T0DceEXo3uUvUYKTXeiz5K6cPi/Q1YUry3WoK+GFabgfmQI6pxQrSGEAeDT\nTBK7yO1pQuHrViIbYkbdJV9IeVKEU5/47w1vBFmHwJpgGiT1e87rv7QEfIPo\nsfnB5b8v3Z6E6qAk4Vap7Q+mhZmAy8ZW0dJSaFMwB9QpmkgDGoeaPB2ML/ru\nkeZRBQPxQUlON+Q44Vo6OLByPce3J+V6ztdmsR9R7m7qjm6iH66hZJeTL6U4\n+QYL6tRwLUjXm36hPJ0Q6A1vSXoETIu90lJij0FG2qYqG50UKXFyp0yf1Ex6\nWFBRCI36UczUdt9inJPfaR61mLimGruSh+Vl6twQpoTIvRlfvexlv9y1lIOv\nR5eDI/4/pes50j2zLUwLjW69o02z1CEm7zikRouRhpVH6jmBBLHHwcjD9xjX\nLgeRwRKqdnoW2VbByBkzQINgc1wWsWsnJWIVQbQdGPDfHj3gBJJ/WZ1FVh0r\ni+/NzRgrUYw1N093dH1uiZtlujrdzZLWx91lc70bfY1NrRnQrg5pXwBHiVNN\nkzGf8CYzhyY0y6inrRNQajezh5+bG0qH1VPFdU/a/MikEwGdBDXxGeiSnIGO\nBW+i\r\n=Uz1T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDngHbM1F8DktwC0LgRTFZNn39CZUJbcld2nZDQ40A3FwIgfuc/mL2XX2Voc5/mR7lRb3fteftOdTUsgX1+sP0hVxQ="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.4_1585111203002_0.45434200025327764"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.5-rc.1":{"name":"@wework/react-floormap","version":"1.7.5-rc.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.10.1-rc.1+5b8a5a7","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"5b8a5a793f22c76c8e9c8dd872b1f5d9b66de17d","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.5-rc.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-7ncqOJEIdZ9kWQg29n7cJ5/JK09WiAE1/jARnuRbpEhc8WGhZ6CHNvF2uesKOx9NEKG6vImWIji52ZNbtWkDNw==","shasum":"14248e74e18c8749568a5146c9edaa03528ffa71","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.5-rc.1.tgz","fileCount":18,"unpackedSize":270618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefcWcCRA9TVsSAnZWagAA1fMQAIiEdJvyo9QN0lYKhPlv\nRiWjRaLRhop4TGyrWwEpeJ5wCuuV7DxfZMkJY72tHD2WExYV89F+IIVn7PO4\nkKVS0jBM/XVslI7CfQFGNsVzSv5umYVhNiadMoGpaA7SEGDx2mz3oaIT71nC\nUoJON4zdEpNuNLb3N0EaTCrQXhjf8ljzeipRAVLzgu9/B37l02OlfwGo4BsG\nVKvmAjTNZWE/Y84mKK1KemQmOr5EnntRe0HfCTxOmhI9ophmREo2i9/20M1r\nbv+Tb0e7qBIRPSvpTcjRAwuNvDF1KQVwGF2GmzThsaAlpl1Ua8dJPhmkN6VW\nc5+O+Qi3+enWjgqwzwTsoMzgYsRf/IiIlEchXjtgDhne0kdJHTaHx8ZJGfZi\n0noJY+XeaHdfl1Y4ELMDEfjPXgMgSGKMKLIfRwWVjF0D1JIJhwqByX6fniKb\neN+GJwxFbpPEdtlvbUCA29bte3eCBEVDC9eKkMFM08e8PBXBECs9/ASrwnwU\nQrxVL6a/DwjOm6sd/7wSnz9f1vke8hM9joAmArs4xYLdY/Zz4gXGaDqLU9Zy\n23Bne3qT7SxXD4/BTuy3OdzsCRYiubkTW1A3HkomiYF+/pZpFcXosOMxuPMm\nB2Y6Ag7NBCaG07zOZ5pqUsOInjfdOHHm8mv9E8AbWxsAUtUXAQiaSJSJMiZg\nXOnf\r\n=faY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7CJ+0Gc3J6W4xXwHD6ooGvxK64Po8mCnDl0XW3zKPfAIhAM3HMiDjYdjXhUgiw5ropggqR8RA/WjoYEzur5yxXdBJ"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.5-rc.1_1585300892249_0.03980758167045506"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.7.5-rc.2":{"name":"@wework/react-floormap","version":"1.7.5-rc.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.10.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"88831440a008d1e60594013e28f1b38e9e4f37cb","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.7.5-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-zQXQjjvprAG2ei/BfNlNGWO9FMtSv+3Bne+E+hT1QqJT2nY1+ffKUwReSJlaMMo9O4rSuJMMOUrXZwXZ4efiuQ==","shasum":"3bbde626594eb95c7154d22d04b2c7868ed56bcd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.7.5-rc.2.tgz","fileCount":18,"unpackedSize":270605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefdrDCRA9TVsSAnZWagAAtVIP/jM4EnqNqld97asH2A/r\n91rDRPSvqVPYgLlaP8poEmUiItsZDQBm5yHscz0YIUKjiSRFfsqdMBF1Elfi\n6/94G9dd4HnjagxFr9XlXBDMsdb2E1FsKhRwgw0ym2btzM1Esqe2yTyw1LRL\n/+dgY0rB/loO1znUFlkjgseX6/q1OnxFecILGuK/7JXJ6d0Ze53/XBl2APRa\nMh0kR0mWVdqBz2V1IRdFzDXeKP3pfa3VftUnkOt/kVwIzrhwDyExN8z9T4Zu\nKuHkd/XTju7ovATHk/bz3iVk5dfHPAaAGAHay7QVLb1TttAc/eV+lvWAKFqZ\nGYICV18gmuDEwRCRWp9KaQIu2mq6B2amRX0z9v3NwXL9XpJLJ5AXz6lUwUkz\nh/EmgPtsDxA42UkDVjd54UCBRhZ6hRU2rfCRYapmHOMW/FvYlTEItSn5LDDR\nL8y49RKCajvLvT53+oboXL9LTNZF4tsWjJzu6Z0hg99kPDT/2zLRtmoQlPTs\nbDTtgBm9iIjp9o2wjve/foP+kWfw2Eyqk8a3nfalx1iJPzru1uQnr20/W6/n\ntfuMjessUjlOiA82/JZAo6ZF8tDZo/tkKDe/ePvaHJaszfjyrrWwZjHYa13b\ngo5YQH+eb5vfMYsr+iAiX1V5EF3t2mrAuPULqV3N6wR4+OHvFH+J0yCkztyY\nZTJU\r\n=pzQp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7hd23eT3xWG58UKgNoXfrmGVxZWen9xG8J7xHxlyBEAiBorDlMRyEk3+JryNxIQKY9UKSao863nqGcxeBZv8Q/hA=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.7.5-rc.2_1585306306594_0.7562884931801983"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.0":{"name":"@wework/react-floormap","version":"1.8.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"438463bf400103af2833a691a846c1e4ff5f2223","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-N1HPoio0tQGncaMYmjZoM6oYoWhJfNVRc06WSzWkwCsf9RCHuKL1ymr3eojye+mdu+j8xNED2ez2IzoxcUQ2xg==","shasum":"24206c6971f3ac6b663e4b2d23ebd3e518714442","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.0.tgz","fileCount":18,"unpackedSize":271235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefhfKCRA9TVsSAnZWagAAMekP/AgqSyO9qKSTNy3EnL/n\n4jnrCcrmCKZvyLoRGEJa695Tb5UgvrIPKgCSHGX4JAgDwigJfa3eUvvd+7E0\nrmdC8pWk8DqVrajefwt5tJaUlx7dDjTsZ7hGFZbejlbTENVd3UPKD1YMpA37\n4bFP0MmOCeKHVLYeIzfvtLcMifewMHZMTEecJNjJocXDqJSnj/njC8XqhBIp\nvW3z9geHeJEDn/3YjB8Rk9ro9KArXv4zClxA3Edjl9/h2QTor3GssOYEUtRO\npFvKnYblh33hclnkdUXweSIaY+/t9VWGC0HYPZi6bQPb9+jTyLPq/4+pkFSo\nQ/jNhE1zIbynVJCAN9V21vTQTeNNRV1nJdSesudEAedW5PMZKy7wsaC/RbZG\nM61P/JLpRsU0cvf49CpxP5s/fxcHZAN3Cby1q5S7BKzXX+N5tE7gu5zAkf+0\nnESgjPTT+PaANSyVDovEbrfEwjhDotwjGq0GjjmYWTO+7mAAXVYN2d/QDAVI\nlOEG3WBRsIWyZsIzELGYsVeebTnaKL4apJYq25m75Tnl7bPku05Uk3pN5+X5\nxBg3cPTu6KtLuXXz5j3dLZlctgBBOXwXNWwWHs7sGd7ZbLPDkQqFAk4z3HZB\neXlZB2TQ8Q/tN00mmf0qpAb3Ac9XgSh57gBhCEn8fbEz32ZbpN9AIbRh0kmK\n6e0Z\r\n=cWJR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRt+1JcuHl50av5y1aUoaoftE68A89HK+ApOeLetWHfAiEAo9R5UiogDXRKUgUmi6CUKFRQhZuj1gPjVdBhiTra1aY="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.0_1585321929630_0.731385363136047"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.1":{"name":"@wework/react-floormap","version":"1.8.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"e81e9b3be29cb2d9d911896aec7dcfd4ecbd5370","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-Aqr9h0QmCgQMrQoa2CUJGB9kEfoo5drqMyAUuO85awvJmXc8f6ttqFuS8Iq1l9AEDhzU3fmrzGOLpBZdQgeIxg==","shasum":"f55db7d6a7c61f2424d7b9135182896f9d694c87","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.1.tgz","fileCount":18,"unpackedSize":271444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegsfdCRA9TVsSAnZWagAA46EP/iByj0jErL60OHN4G/Fg\nSOC/deotvLMPsg4QHDvnInC9flPNVHfkIKjDJtBUDmbT7WAlIZq8+RN5d9nm\nBCgZv9H71W+YuJjCX0gpmjJKD9bgHe3eT3rXIVGHthJ1v1nSyLlm5tLiy3+z\n27aIQPkQDkJ6c07rk9+xO54MOMdu1yf0k5MuJlVR2jc6OXGxfllEH33FEEFq\n2gr9sfp4e9fbuJ/Xjd727hEpwm9MiNlI0sDW1BVzH/BmPF0LvNZNpP6/LcWC\nM+WTDMfU4EAylgab725ALVmmeUkD8brDSInUo3KPLqPumUkYwWSP3pLlvjDe\n39EkcdkxVWmn+SHUhgWAVy222R1DWy5xix5tJQytsTrmw7JrglygAvjaeHPL\n5H5boFZ548ps6QfXWOd2v72imLO57KOqM4Rf10OWj5kChSDnvO6dJUBIor5u\nFwviBDB/iQa3gl38uGP75ErqyHZ23Jc8DbR16FningVCWj/DnUAO2JtQG/bZ\nrLUn/8Pwp7crx5s2kOkr9nihZL3w0DMp+vD1cgLo670hpuJ5nyMFWEAODs5a\nRRUUJtemXaeB+aOB8ao/jRJ0ilKs4gaDvIhkSWg7aoXlOvIOqekp+wt+bjMx\nVN1XZtM373ZTZeBFg1XiXCio5zfvG1vnM2C6d0joEqCVS098ttJHjPPoXRq9\nc/Jy\r\n=5Shf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICIf8ThnHT4xadPMA4CEjz7MeaxAt9PzmRGNUeLOhIscAiBzMg/OxLZEOxtfPzjT9OQV/ihGitR5P1RrD9vU9MLWkQ=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.1_1585629149160_0.9814657399531068"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.1-rc.1":{"name":"@wework/react-floormap","version":"1.8.1-rc.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.1-rc.1+89a52db","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"89a52db2ca570a9efa58c24bf3c3c1eaa70e8f24","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.1-rc.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-bTciG8D+Y1h0CGYBf04m/gkrOg9eRVoSXYWTcHr2lXvSQ5LZwkap5jpxsniSr88R/5E/r5r74L/gpzVyDfYQGQ==","shasum":"9b0c2a337023f1b7f7c2c5ca18e9f6ffdbbe19ee","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.1-rc.1.tgz","fileCount":18,"unpackedSize":271261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegsgECRA9TVsSAnZWagAA8dcP/1lYYl0w9Ql1R0ZM7rdL\nBW/i+aHpAmWr7nOfu9giHE5kI0ictbKzqaZczJXFK00bEOH4eJvHNyC1ZJDN\nTLoZFfkSSpXHDoNlifE8SiZifs6Uh6+KmiQ+AYIMTcJSVQPqrpJ/hg7hEa1l\nBDh6U5DurUhX62q7bLiAnz/e/AD+yGMdSVwPDo9IlNdFV6JIxLT8qdBRMd50\nnKGooQ/xUZOvXqGIPuyDCtIT6VWZHGYkPIXTxJr7f/+GP056y0s4p3bVckMw\nTyx2iaGpMHFTUt4nOzB2bqt93yCveEb8bjnLr9y14AZ8TbqMzg1f/D4UIEDJ\n3VpI0eAP4tl4L9jTXazH4BhxSecQl2mMHXAEtlr2d+ymI0rrKUWf6vEuPOF+\nfaMMRtAxjrDCilDZuzM9lzyQo/HWqEITOvIun697bad+XQb6rArpPxJsXtV9\n0NkQjTlWXjvmLJueJT2s7K1NZ07j+L+I6jwA/PZx1KGV3Apr6bIM8SPPDtQr\npItWRiu3dEZi94NNnVjN6iWdtwvtyYmMEWUsC4yyQ0fQ8m1Az9I87YxhF6sK\nMV+XBtcUieSelHoovIJbAcW8Alb4HwVBdfFvvr8D7CQ2hs4GH/HofDWq3Cvp\n7bXVjlhR5OauoCDeKhZyXm+KKkZQuR4YoL/yFX0n1ar+45wPuNyplA4dujiX\n5Ejy\r\n=Uco1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBri8qBfrevRtfPpw2yo2vOkn6JmMUgtknv5AFbUSmkmAiEA2y2rrc5jI9xR4dTP0APJKTxvG+eIAhmAWLnaun+uHmA="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.1-rc.1_1585629188109_0.23542630830708644"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.2-lodash-size.2":{"name":"@wework/react-floormap","version":"1.8.2-lodash-size.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.2-lodash-size.2+9ac3db4","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"9ac3db4d45a11185f14dcda32933af3f8cc9b34c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.2-lodash-size.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-MjoWSrAPcRT6bvZ95AfdVh1AyN7BHCvZHMA+WXrBh9rCnxu1Y3pHh3nGUBZdvtjGkXQsBeMX1tCXtjp5bP6oNg==","shasum":"6e84f9d85bf4599eca90dc5bc25d3fb3fd350580","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.2-lodash-size.2.tgz","fileCount":18,"unpackedSize":271488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeguxBCRA9TVsSAnZWagAA/qoQAJOZDsOagFqjG8njbm3O\nhISG3K1KGqiD4RDl4EL3YXUoumFL/i3nvMPZZk/gnYxYIZvKpkqRGqxY8GuB\nsrwp0Jj7o0o+kGSvOjtmi4NqgLE3FiVxLGsxNCLKBQuEhGV4LgDRPHUI4gOL\nOmwjYgUQ7qCoQXg8dn/zJ/HWgBaZ16t23RMSTjRvX4mRANRCP4bMUr6dzHvf\ngagQCr0SGFdr1wbASYXY460RQZ3NFwo9aFxg6KTD6wXEY/YUKEdpjcesV0i4\nYSoFvuCN1HAed2mLaAwLteq3DB1Zm4+gGz6gD8t2UmPVA8nPfD+Zir8pKdLw\ndWzQOTb/YSf6slqhTzVMlBp6zF4WvYfv2RhtiMi1SeTs1toYPoSAupvrMfFd\nPEOFAVa5vjxXSIsqG64e7UCh0Pt60ApiSFmoPMfD3rfoXN7pJUsmzIfDPf5o\ngwcZH2ptM8V2hLhQ+aFwXQ8WijGbuvTAhAAKslmiKtsOPtmNQTa1E5hzeTht\nRRxQ59Dr6/1A+XWDUd0YUCtrLb0EqduqhWFlc8vgC5EkQBHD0OOOfPAPB6W7\nJwvnOHpeR/qraXK245q1+YsZAkDLeWa9ANaLyqn0/7hdBkKMV7aFA7XpiI8b\nr8K0gFtWUHovDeg6gYJ9U6pFbE5KqUHasSJEMn+F+HI1SWtJ/c7cDFAwgMGL\nPplk\r\n=q405\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi/PyyFufx74UmZBwl22WTBn0z1MCh3ZC8jJ69UU6OmQIhAMRZ61bIq7OJf39U2xi6CsNCrmZMFYI28vjgwQTiIuwB"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.2-lodash-size.2_1585638464645_0.01978671011576827"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.2-rc.4":{"name":"@wework/react-floormap","version":"1.8.2-rc.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.2-rc.4+d78eb04","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"d78eb04d69723967cdffdc999bccb858c138f980","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.2-rc.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-QALjXNc9fJCLMciytFS91fZQ9244SmO5L/QQMsfJGTJld1U4nA7LVwn2rPQyETSuRcv3JcDvIbx5yIjixSNzVg==","shasum":"09c3741481bc4fe5ac22aa09f41da79f00482d67","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.2-rc.4.tgz","fileCount":18,"unpackedSize":271470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehBVrCRA9TVsSAnZWagAANkIP+gMCptOj+1nO8smkR3Pz\nkAMS2orecY+FXxjDriezWAjl3cl8FlcWfybX49aveUHSjOW9nguoOiOXUdBm\nRGaSRWK4MaPzGAG8CzSb4w4zTDMBWt1PglOq8WemXL4ngbNbi5zqzPrjU+Ea\n0EqJp0XpMm4zsZgrs+oKi+Sh9VUCahgHbeDre3dsJkATg8X6o5SJsIGbppmY\ni3AORS2gp6Re/goJdBnFRwC3W6QV9Ao9b1mCpDVYLkp/rcR22lUzT8VImorT\n+ZB3SSQIUaYJLZNsHbAuNXNzMcngydM+QKd99EYOeInGtbt20fVni5cHt7eL\n7xrrDXFhMsEAThrxBt70v1YBbbgggVBnkwknNeoaRcXtVY7ngugg5OQ40OPa\nGvAtgqGR2Ab2TQnjo39bc+AEKniMMZJBRe/No7XQilev+ClYEKBifdUQLDzm\n4ZyRZzedrwwBslwE7YqnleEEkBIYeIuutnKSCqByeQ4E3iwME76bveXBZ1qN\nqD8lzVudgQn87jvu+pNZT91MToRgwFCoKJKkjl3bVsTscusSmdAudN1fmrQv\nTehYzOatvZwvejvFJxRnPv81lk0KYYYpIiUpsG5CZPeONZdnZUwbtvHghEBj\nvMywd6zJFei4PNns4gsNOiyrKVPT67gr6OUtApO+SvULDcwYuL0r9RoAvU7t\nQXWJ\r\n=WjwY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxtYu/qc7019fBAtkfNw8sCQzuSc4/swvfCsoU5tEC5AiEA9y7Hdv2OlwNwtyqbQgZBUmUeKqLprQcc89dHtaWdmcI="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.2-rc.4_1585714538727_0.9099195596379279"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.2-lodash-size.4":{"name":"@wework/react-floormap","version":"1.8.2-lodash-size.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.2-lodash-size.4+260a78f","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"260a78f2978e67ecf1086b3d8c3e737e9e56a24f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.2-lodash-size.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-Gn2t5rP5YebmaPGly8+uwJLgjvHmDa2625zFxSDAy45NQypmvI/qpZgmsYRu1jvMa9pXXHbsuZosDXq82wvftg==","shasum":"f284763729eefc786bf0a15a4951c12d7bd7254d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.2-lodash-size.4.tgz","fileCount":18,"unpackedSize":271488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehBdSCRA9TVsSAnZWagAApBQP/ij4Ivq45rqLg/sazIuS\nzC+0Qp1f7rnxOMTp5E3OlK//D/PiKgRqdB5oyLus79SE/c4ucuQv9tPRjUb3\n33f8Pg77wwMzHY0Z810m7Z2mHuGSR0x0ZBSUoN08oRBigsZ6x2eL3PGYvf0N\nO4D7Na5POFvI/vs6YmL9BeI3corVuo6/DOpMT9C8kblwOQGrJBi+tGBoJYHx\njpnfyITYpYSfqiHnYUNuztu4t5LN9DMUNaBTCZIYZgdiRwxKzGS/vOHwj6ma\nYrjYrfk/jDlSmQdWqIUzyJ173ACET1ly9WfgbjzvJLUL69rcqIumSivKwvqW\nhPw6jGMDII+0Vacn4Pg9mb8/tYT8tGMuiN+ZTShhXEXv7e+gggnmW7YI8PUx\nahd6PTPn0OlWspXUUeDp7q7d0hPI3JT/xi0HggI8c34m433pNYnlbIDkMFR9\nDc7sC5Pgz5KV3ZveHtATcPsYOwgNKxV1FhQufArfJABwcMx7tbiy0RqqdWmP\nQ1qsmyX+341d2oLWrXCscmGRTwUDxUAEqhEvXstRE9oOWlBaqoPz2BL/2oAx\nfPE624BpZkLxnf35cjGl6puxrUjbIiCKe9McyFPNoAFjECzoCBblhYu7vadw\nkZ7UrWI1J8At0SKCBdwpRZZMzbUZkC0KueSWRcIBqFv04cvObUz1FXCGSPpw\n/55e\r\n=CjLN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCI8YxEgBhrT8qbDxUh4TyFQGhd8+YSolDbMbRsQHWjaQIgTdOvAzM3NQ8ZXc0hdEaj8jL6iakVHRNaL1HYWQ2AHqM="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.2-lodash-size.4_1585715026283_0.8744990755171864"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.2":{"name":"@wework/react-floormap","version":"1.8.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"431073dcd0e842510a922eb5625efe8530055957","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-DF1S9Nh8HMZpUCXOUtxtfQZDsnHd6kE/tzzAM+3J3EAIMU7D8PuT8tmG70EeZv1wVyoGCVBq5TE7w5e4Kxg1Dw==","shasum":"4dcfa51c0a5e7473250175dc035e7437dae5835a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.2.tgz","fileCount":18,"unpackedSize":271653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehBnjCRA9TVsSAnZWagAAeOYP/0POFeABpQRYZetc3yk3\n18Pl+nkiZH31zzaQ6IsGQgGjjHCTBJmHdEMxHzsiBf3NiZhoMANe9ivxydTw\naMCAa/R1wFG0vPRKu6qj4MQeZEUi6hqZnBbDF37u7jVJ88PvD0HVf4YPWQXv\nCJPyeST5KRG0UNupOuCslvcuO96pGWFQX/ldyE6iGHqDYqGxG3wjJzvJcBoL\nyh65iu4T4WjYDpP9W3XVt7OK3fX1f/wCq7bgDLXqM+/k9wIn5M/U3hrrkSQg\nvLKnpuz8kaRp+JUWzjeRsYsubkFkUFCzo4HrwlOS5aPMBuu0wCYfcLZlD6qd\nwTLh41jbXa+5Aapgtm/zZLA8d9OSr/AY9NanSSGMSwRIuf0cVGyAPJv83Nqy\nQwtAbRq4LyFrzTipmgi2ww8brenlonXESBO3HyuumX4c79sI4FOyLpuWq6k8\nOyF5kujSK9prhSwe8FQzgrfToKFmb51dMebKhY021xzRY3LSLypRB40vYmcH\nQf+ifL+wAPLy8a2dvDLhGr/1Hq9jE9ke0kqqTJnR3AVCtsPUqxcQURndNH2A\nvRV7vLE7DWdVZER+r7znzd6UuAl5lnv/4SjImbzbmzRBq1RV7OLvAKLYH5wc\nDNpsG8jrpEloHe1PSnGlBjcKJNgyEkDt+iMMzj5fQZlhWdLgQQxYk1O8sqD+\nlQ6P\r\n=lB3s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxReASIQUY3kdTn8F/J9zf6ILvnY97zVxLc8tK1xZdLAIgA2CftoNmRYhAiF28IKg5u0A4/gnQsk2p7V697JwpY+U="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.2_1585715682656_0.9115035667225433"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.3-rc.0":{"name":"@wework/react-floormap","version":"1.8.3-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.3-rc.0+766618b","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"766618b5fa4b98e7cb01f5e9fdbbb0b4ef43ff55","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.3-rc.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-5SkW06DrpKPRxNmaAtqMwymqtGRE+0LSIBFAmB0SvDYCWXVZekYQY3eqQKJG0RYCKb2FhcjS+xchF0IBFuTHmQ==","shasum":"264fa7a3e6b6f859872bfe8ae1049a951ddd44c9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.3-rc.0.tgz","fileCount":18,"unpackedSize":271679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehZphCRA9TVsSAnZWagAA518P/RGQI4GUVsMpCBekI5fU\nfvUm9MaxPh9RikS9f1q5kp85jzn29+wGPxHtwR2EnlAL4vYg9WgN13SQ8MYH\nvtKM1QWGhvo9nOLqp8+/l4WRCq75/y692E2vxSJbBsDTMcohZjOY7D+q6nXs\nkEJj/0klWLTzu+IRdFi7SiQjlzGrzUlvKnRi0JZg62BCEgQpfQdLokSdCAmG\njpiPaFXPARvIOwSQ0KM4DyOkiaNqIWrx79s2A9NGN/6B83QA/V1jTmIcwad4\nY2tGmNOkDWVySTNzsQy7C3P6X1n2sJ17P4T/0FtRSAIunugRRRWBuK6AC/wH\nABS6JYHIhwIBVQJCZ84hINJLZklfCWYNJE1bg7TP5aRAGlIq4IKWyxxzCEwy\n4zS/wHM5tXTHMKUU3hGnfj/vweyCTDD1R9IQUC/be7cuPMgaI2GPka2+eYtW\n5uIvTT01TJ8P3N6SWGcKB5ZWrb4USBZUFY8U+BE8YLDVh7EcJdeWUJoXnu/V\nIVpEGD1hmyzGW2cXd8CUxaTP0/M7Ezf2W+GFVPcXvuwn2glZmBt3mTEHVG9h\nBl6cz8b2dClH7N2FBQGgAlMtyCiDS88S9Drea4C0/t46DTVzQuqClsTr1aAc\nsbWRcTTJwY+oBgZIu91Jbkl9gD/nO0IZSUdgx4kblhV6m74M8tBG6eLIPhuL\n7g4/\r\n=Uq9G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaZOVJFt5Sujx1ArnRnaTD7Jlf80MQpZljzjxcsO3BbQIgY0hGz1619ItP//3b4OINDTMFGYbvHeZV2SGfuKbgEcE="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.3-rc.0_1585814113220_0.3261383959169335"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.3":{"name":"@wework/react-floormap","version":"1.8.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"aece5c5fc939246b8d95fdd24630fb26c1de12f9","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-/H1VjoQuyqALAw37n0CjJcfnc3PauJH0vtdw6sHBLYq7Bc+jKEH8GJ4Vt3RgXMs26Lv5B5jpb5RrTMcXkLyJGg==","shasum":"a700edfc8010319cbb1c7c56e3fe75dbfa1e182c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.3.tgz","fileCount":18,"unpackedSize":271862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehbsjCRA9TVsSAnZWagAAIdwP+gJ7G85BLhqK8V8XWl2e\nf2hcDGVy282Go6X4LnQZsS1GkcdrDWboyWrxhucrHcAAb2kRqPtm5GBjHiNE\n/95Y5JefwW4rxiTE7eVd4YlgW/YeRK8YonJsOx5Ft6LxXMKgstRbbWzV2QkT\np2jiizoYn1034jNDQ1c5Ou3/PQuRrFL/B7KOJ6p3wxonAv1rQ8+lIOFLTIt9\nut8DFD+8egRV1ia2LXwgm3RnNvvm3lC1fnX+bMlDXYzR63O/aewG3W4VqruG\nTDNckrnuKa6XMkZhykQfqYnym8IHfBzhKgKjWSFgT7fCV3zr8Ezi0rGXXYg8\nubQT35VhNXVbOg2Iu2SF8FIZYg8gO7flvKkpE0s5QYy2KVRemkQZXCG1wjW/\nAbM4KJaPxHzKktsqOUkmq++rbcRHinSr2V4icOgM9DROlcVXH4h+jWjia6uh\nLVWoTf8PXD9bTCVy8XkzlLR8mAV967EcbM84NDbHydHDLteqw9FBBeAnVedO\ncnRx1L7ie1tlCW0S9KNREFAUaAFugDBYi+WHgDBB0nNfVpOqWnkDUHH3GBUO\nA1FrYJfAlQukVx3ahABqLPizOQmeqDuPAoJ1TXb4RBpduCkhlfxGm6Gf/vu9\n0b8bzl4FuicWbuDmTxEHQtZnFawKF5xV7ygeUrroOsXymcHB/X/dNytXChdi\n27IF\r\n=KOwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTcPPWQffqA6QCYxxV/jJdD/efR0MfPjlD7Ru+328zGQIhANAoLhpJXrPyjS2+sbhSSFBgC9IJ1Akc4/IN+vwA6NcN"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.3_1585822499207_0.1628528485259373"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.4-rc.2":{"name":"@wework/react-floormap","version":"1.8.4-rc.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.4-rc.2+03ff9db","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"03ff9db7436ca913c5e86a712b01e7aa4d434e97","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.4-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-8hJI1HThjhmxyM+jE0Fdr29GyvKGSB+nDWq4pjZb+j72Ltxj7rxYLjIwLEJg5EBqvmruD5uyiUNsDSQ5D/bTRw==","shasum":"a35644966bbe6f757a4b2831df3684adbceefdfe","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.4-rc.2.tgz","fileCount":18,"unpackedSize":271888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej2gnCRA9TVsSAnZWagAAngwP/2hrH3UP0Obx8UOeMcDa\n092BOxANZZtY8QQ7X0AmUxEvfQlYh1sO6vx+v7a1V5Fw5l+fanztF+0o4ngA\nfP1hmH8GVldIMNa6NaM231kvsLDfGfJ/jsyj5R1oRSQsy0ViWWxYXl7gpJtv\nvDzY1rbhJBfo0hDfRou2TjG3dy2QtUUsEzZ5BxjjAlU+OGuQPUk07HRvjNwg\nCHUdQrSeEWTuXMv70dpAKQODMsScbB3KhA/Kjbz08mtF6at74Dh75A2N6gGe\nuVTiLTvMDCLkxwiHiF8WJd7eXU82klzufXEJ3R6dJkzCyAtI4yIuQ14VPB3B\n/TcbXVV4w5uV4KPNhcNdd2LcMnN9+l4+C6dacKKNzHibGfQ4wta7Z0L9/EJY\n5fnpJyEESixFP8a3kbU/hGBAjxSs8o0zGd+s4p32ye3Orm365gcfJgcTdt6F\n3ynGKTyZ5Q43oD9pSybPyf3ha1jhYO2leSMrW1kZAOburLQBzimBavh8o4h8\ntUbJZOIxBd9OgMTV/7lglRk7b1nGxAflz4CnbhHODAMiS0p5mklPeTf0pXdG\nJJONIUrbdQWP2g1AM4I8fv5OBvxcLcMMo++qfpPR+bAYTtti0dnq6UcvbIip\nVpWt/ySn4y/PqZwD5+HyfQReK20rgMSEoVv2duy3vJjbwkNStwHEvkWKb1p5\nrPsL\r\n=243E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6av8BtagjwF74DkMH/gjJes4XXxZtmonJG1/14VxZYwIhANMiQ0z9XfdLi167CtuwARHl/reAOIHqMFspijl/GfkK"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.4-rc.2_1586456614676_0.23885200902086212"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.4-rc.3":{"name":"@wework/react-floormap","version":"1.8.4-rc.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.4-rc.3+b5fe69a","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"b5fe69af6b96f0f0ebfef87011f5823d8bf8d99c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.4-rc.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-x0wlb8lNCdW0Ru1IBzS1GY96I2Qa88NbNC/E9teFjW6eZTdOk38xriqdKcYn6M+6NnZuOOerfQWFphECBu6fgA==","shasum":"dcc7b7afb80ab02d1b20a9fb60e0840fc6c7119c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.4-rc.3.tgz","fileCount":18,"unpackedSize":271888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej29KCRA9TVsSAnZWagAAj5YP/2EN5EYup7PMY/2jVjCd\nKJFahMvuH3du/pQhg8w6bQ4THm6bmae2Ha5WU2jA5RL1aV8iknuvla2Hc++B\n3g+81f5tfVg67ebynP5z3jbD5uBs8L0xqU3tK+Li2cyUtYhiHrNz+g1XvdCc\nN5QbtkeIu892SDD/da1HBuBmRMOEhLzmHBY7U3Nl4MGyPcDF07bBMbBTpIqb\nXxjiBLf/DNB3/iNIhBhsHL+jW4qU6nxV3Ysy2l3mHWvFdvSt2TSlJV/9gg0L\nZc/pwzoxmbjX29wi4Ggm6JPIUAzGQok675lX0+RvnkGUuHnsW1aMYdYD40RO\nHxOnDqhOtw/nMhKMrQUZDC6vXKNbhXjGPEx/ju21K8lPKne2DDODoeeu3Xra\ncW7ZF6lyC+r7y/hSNeHB9DDb12cldod2La94iCQ5tRhZV7q3aP1tAN8DSDb4\n6UM64wCdFK6i268A68D+1aU9xMlyIkEfRUc9m0xUMrhMCp3KoKy5Srvkge8/\nypbzRCuNuR3RBEkYqPM1dwoMjgz2FHu/EwwIZ1WBKoPIUHZMf6JHsjjLokdT\n0tMGQmzcX2EtIo5GTvVmEsVIZ36lXNbJCqIn9CHy02dkLeGwTMKot8YXDAGM\n4Bf00uaRVzwwxO2lW/XrIHgMpb9PRlcDgSu2lbjiVI6U2cbh/qSHTY8cXNi6\nLLXR\r\n=lyql\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+tBKZjjbEnidsAwsa4Lc8xY3S0gSWa7p+5vvD2jkAGAiAtEvsgB+3U/IN7AU9lTz/cXil8IHqiV3BurvZgKT2lNA=="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.4-rc.3_1586458442063_0.30010021434268097"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.4":{"name":"@wework/react-floormap","version":"1.8.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.4","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"c23df51ed080479161b3bae550bcc5b0a07902f7","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-XtQeleOoQ2u3gzjSMGPEnC9N1Vq++jilkM1TdBFRkK+9w+mTZ3AoM2sDeh9JqKZdwacEEX3tCaLaX1om2XpwqA==","shasum":"1e435277518248b951eb1e1e646d1dd6f6f5ec5c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.4.tgz","fileCount":18,"unpackedSize":272071,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelGM+CRA9TVsSAnZWagAA3uoP/jMatm9tZ/Ryb2QaPNdD\nuWn7CpC5z/HyV6kTZc6f3GQVxmYPJZtwe2D6woChmD5AkPuZhheNUkYgkfOx\n8VmTFZ3gB88cr3v6g+39U06RWMTa0mZVnM8P24eyhGMPGcfC3nfF4PDm97+v\n27FaWG4umuqfyoxYf+5anob+IEiLZiQoQ7YuY0sKDc1jpKk+G87FL2NL2/ya\nN954QWK98y7elRDx3okVK6DplDx6mvl/oh83EPUA+2NE3bCZmuVLVH+9IhJ4\n45qWkTCU6ZPH9ThI765/NP0eR/7D/mC1MUULn6Sl3pu7nP1NF1vj34ptsbxR\nM5OS4aAzBvuu865wsVM19NijShVWwvklp+a1/Ex9FHAuqyL8hKbgayNOXx8W\nfX/xByVZOifZdMzuSJtKL446rMwBLYMreljXmfElFHqKZiiSb6DngRPGhlEv\nOllUc5t5qOTlFR/z/RUtfMCuGqc9Vu3h5lhWTHlZOaYuYvg/JsXLG1eD9LBz\nwu2tehHprLB5UzHTBRc8toyH5oDpFlRpwj7DJs9hKP/IWnve+BnCKbXWcdRT\niu0an+0PWXIZvNU5HiytP/gq1ba/HGHO+E+hKSmAGsCC+b7qZVHGwKyktZMC\nXdXHbzRvSLzUnQs79dZAukqktk0fyx8+jItzJtCZ2wmXB28QSqZjn7AahCEn\nly0G\r\n=6/Qn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBN1FSEuQ5K5uIfTenxtRQCTJdwlhGX3epGZCsG7O75TAiEAjbCZW2ZSgEEEO9EDjpBKixra77j8lhqYiSuIoG2O0Dc="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.4_1586783037475_0.8042601307528663"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.5-rc.0":{"name":"@wework/react-floormap","version":"1.8.5-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.11.5-rc.0+78d595e","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"78d595eef361115b9ea1a62a7622981a4b1c211c","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.5-rc.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-clU8ggiAdQm603UL/lB0Z++slruQWeR0DsZdSoi/fJDfSeg7VEsWXCapcsW6y26RaStC2WGgT1Sil+fycKQDZw==","shasum":"b33a364eb2c14887305f9b457780cc3f1b11c8c2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.5-rc.0.tgz","fileCount":18,"unpackedSize":272097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelmePCRA9TVsSAnZWagAAM6sP/391cjf7gDqnKzY/A7mN\nrrKRBbaSUaFnZIq+hLVdR5iU54TJn4JEjj6kz5kfDoeDrrqSTPEADZUh/LHH\nUrJo54rJm3/ZQAJkjPAEkNYNEy6orjBS/RsCA93gOwYZmFfbZcKNGYV9WPZh\nAYCRVmlLxEoItk8eLPkkYSLQMTqz9heX3S5d599kTcs1IefZXbBiZojdPYLd\ncnRWhebIW8O7nf2XtYGXlqbgWBWzvOFOWP+4JWoB4gIkeMBIwJIW2Ubg52QY\nd78pIl/9KbuTC4g8teSXPtSolzMqQbNMrLa+//91EUEPq81jGh7qtA3tfs3o\nm7d7amZqub+lFEFFCo5Gmdlwnz962IAvHsKBeFqb97wZ7Ncc+IfSRNO9sG0p\n+OCD3Sdfj/87B7mtSMlbqdtQ3VTjoA63GQUBjGB362OSQFzdPLQKoGYh0Uhf\ncEml6MA2m2+H+HlhFaVL+33H2mEy0I1xM++zcwpCNTq5Vzk339Q6PPERVx1N\n0VeQS/mqId+IzbrPzZKi1FK0MP7VSwpBMkZi1fxOQErhBGE7LokoFr8ccfRq\nWHvSAGyGtwsTRDCf3MtPRKWnsSITHrRrtDJmSjV647IKeFOQMxNLYuNmaMDe\nFsApCOW75xLbeVmA9HMZ4uhzBEXQS0iqnlJttcvgfgSX2G/92TSYFWb3Vb3T\n8DSv\r\n=Hoah\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrDQPlEOu5Ha/hx8qecglQVYVoRzo18B2G0J+g/a+uJwIhAMrfM12S1c4oKPiufEgi5jzhrFUQ3pgLXn9X5ddl61rF"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.5-rc.0_1586915214966_0.6579570118388187"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.5":{"name":"@wework/react-floormap","version":"1.8.5","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"acbd516862441428387126b326bf4a5f5cd12c55","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.5","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-k/yqqTOjIE0OXkoo/PW+hp+3Xgrc6yhGCAMr6YZwady+Vjzq2QHgJEsgHwjkV6mV5X3O2OtKxMUIbfxTZumaSA==","shasum":"da2e206f2715c3b9eaf37abd6df82ca7671ef58d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.5.tgz","fileCount":18,"unpackedSize":272280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelmoICRA9TVsSAnZWagAAvqQQAIkkmXVTbGLobeV6+7hl\n4SPvbSxLBKqNNpu6AJOjZfF80K/BMoo9ZsTyw295tZGWOwpZWoLg89aw10km\n7u5erbrl9Jg/YSCqOzkuNU0spIi7zjmcRBgUap9ZbttFDWTfdqhT2Was8/ax\nTh14tQYSbHy6DLjmeOjTInaioMBxcluP6ILYgI/hGS97Z3pDivkODVcVVz9q\n0BJTzX6LsEkd8K1ve8YGhMzf57N25jLRh12uftwWMVNAW7JNkuDQ28QKaZ/Q\niBV+IJBiJDlM6jshj1bGvMasWMh+9PzsboC2+YhDULb/F3O8mS5+feWWWdBo\nx8KFTVyD3/pVLYMe+kEI4rNgQHLA1DvdgD1rmNurqLKdNDfKgwv279TDhlF2\nsKXajiOiMnbZtX7eE+tMpNcXuZRSmwyQSf1IZSEAfgluqZSzw2Wsas0NIMig\ntoD+kA2eAhDuYAS6DoHsVxKvgMjmwbE82TdGULN38z1qHw+cDfZLr6RF4cgq\n2D6AbJEP0Rm7sIRAmC8US137iSuwv3vx/JMCgJvKqc5T01elBfIhg8hGc1Ul\neBLQUL+d4HsGgQktZJCvwguK+bV4yJxG5Gao5zjiRnpcXCSKbB6S8sAVXP3y\nWyAM2wfoBrHZLtRccBGId8i50GRdgYG1Enb1SNVBFoSHCTMeeaSnxC8wOLKv\n+wUC\r\n=yf5n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAg+XD5kPrJ+7lBHbZNfSe4+PTEtiNhWewg+Teweq4WFAiEA3NvpfCtvT2vYN/RwgGu9A/Zo3Jliz2+F0GLNtxAVVSk="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.5_1586915847796_0.4434768543117007"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.6-rc.0":{"name":"@wework/react-floormap","version":"1.8.6-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"b0a9522c54f8f17585ad4f577f65dddb88bf5ab9","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.6-rc.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-ltZ9M/oJbb9Kucd6pHb3nr9KJXW38zDCWBm/6xC7auKLmXGEaM5i9gSmQpLGenJwWWR71ru//3tMOi1RKAHolg==","shasum":"94ece46ef58276cbf36d58ee6b401069d30da154","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.6-rc.0.tgz","fileCount":18,"unpackedSize":272297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelnG/CRA9TVsSAnZWagAAixoP/27j74c4aDe6XDoK9s3y\nWn3UC2opnDDW5N1bdiAMn38ZBNTR3g66X407y4NlUaXkEZ5PFxzFFKBGonlR\ncqyfASrg7zoAJKzCoLKkvltxmubBoNQVExGjcgxDDwwA0GumTClQqukr8pPz\n3R17VssZyAQn9cKqfCJ1N4N+Vx6mpnXIGEo9bpesZAJCq7w0qn88+m0OAKum\n+P38DSa5DfZMdoBIoqf8h3LNFsh3GgD15SlgWiTT/YV/5ZysZhGhdsR9YgRQ\nhYPf8gcgEZVtvdd6hMbMtuj7QwWLgEFDkkayNiYnlIxTum5GpQ6Ha+tl8a01\nQqtcNZogonu7Cij4j++ASNIJ+gIsQBfWp33SpkKw+ZdcjcWcBpjkjHeiX/xY\nnxefaDWF60PwnZRK7PuyQsehH8/HGMJXL1gBsrBA/FD1xVTt7TW2Zmrqoh3G\nNNHsVNtQFxVqmJDTLmXWgRKzAjbNG4uE4pExGLU8XD5dmW312R8vh9lR26Aw\nIkkpbrjfx/w6SvQru+1ILBKY131yLdxxOg2lvFNumTgiz1YHkRduoLH8t/j+\nfUm0LGbugGYxQDQQQkpav8KwJYmEJUGk+AOWMsejWWwk7/w8nNe+AVzeV5FJ\nbBMQNF2XJ99/nf0m0b4py3hMLeYNtBDyhDJz2jWUgkB1/NzZVTlDDlB5YF2s\nYiwS\r\n=yZuH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcFuRVZnuA8qmWt/A4ZlZmubFi9ew3a4UJ6uZaFA5z+QIhAPtBaz8ChdbJ7+QOUJJGvEUm6MD+ttAOzAoPLqy5lFFm"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.6-rc.0_1586917822827_0.21590606692881154"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.6":{"name":"@wework/react-floormap","version":"1.8.6","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"2d2e4ac270fcb3092e9794961b5869747ebddd00","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.6","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-p1OD8yur5APoLKvh60AB8aY+6riaVM8yDjhbn92uUGUNl9y/ejPMBV8+cYz7TO3WZR2/AZBnSXiCyF4t/ytsMw==","shasum":"88465f760e3e5893ae184411c5012e35520f0056","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.6.tgz","fileCount":18,"unpackedSize":272684,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelnJFCRA9TVsSAnZWagAA/YIP+wZ6gzQwhZrWXWOFjOb3\nNdFHcsCgzJmua3R32I+1JhkhGj2EO45zxsScldF3SXMmbZoUKFvhtG7gdysJ\nw4sJ/j4eoRkH2ajh5RB3CAIdeUUpmEkRrnJTmuij7leDwxt/lIs/flzsFOV8\nuFRwi0SVnmFAyU/Mo5ZS2Ssfs6C8YnwNIjPG2nxJrYXNaL3n5eiPFOWJIayX\nwFFPtUcvpmwN9XxAjbB3JC6m7RhSHF1kOzt4Nzb1hbRdKd27l7oNx71LITI7\nVHGKyUujLuULpOBJO0pCt2IicX3luEK7kcYT5BP95mqh9e9yE4bHrC15AuYl\nkYf8RcP5Nw9xAgc2ZsJZ1jckhD/b7uNb2tIVWR3KyBZ56epe5mkWPJNdE8uh\n8LasaoH6Luxr6u7XJYR2LSN80qxrFAwddk3cJh44CM8ir1BAxbbwb7SQaau0\nqzTYVkPfT7jEgpwtp62Kt7wcPvkOvD91bQo9c5bOECn5ryR+9xXlRaJjZifa\nUllnCsUw92GBDtT17Vl/9EQ68IXACKDcyntuVh2KNYk5B6ewgBhNwMR4TkBX\nk7HVdrl1LEj85jRullY47gG356j2V6bxA/KbeVFDyJvgcbG07J/6s78vz011\nshyin80qwChi0WZRcwOSXHRMNmZQsez7waWT5auK11ns5MVqaqxsDV09L1vo\naAdJ\r\n=FmTu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtL8lY5+GNGmg+ssYryB7xLJ2FdQGkmqqFXjf18vP5RwIhAJUgPQadnB2W6EIr94P76QnW7/PGasD3AX3eT11pZ5Gs"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.6_1586917956840_0.10383267661801399"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-v2.65":{"name":"@wework/react-floormap","version":"1.8.7-v2.65","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1-v2.67+13dd3ab","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"13dd3ab2cf60ea84b4851e57ddba7fd2e6fd0b9b","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-v2.65","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.19.0/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-Kv2gXljQNShK85teFLtOBwF6BGIf//SDBmr1BCxTSr2Wvh9UAZpbU8wDJ2TyLtvSZU9V3VSM9uCYy2I9xzpdBw==","shasum":"5965a1512dae0b084f434cad4540970d6bfc2172","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-v2.65.tgz","fileCount":18,"unpackedSize":253215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiINCRA9TVsSAnZWagAAnY0P/1t/MiDgye9lriOZo7Np\nNf+UcL50d3KFQ3/gxlyEA+Wpb54HNQ24tYG5tBZA+yF3nR5452ey42bPgfhZ\nZgEK4Lw5SzYTJPa6AU0RoAZ5LF1O/rOMlDbv79CpEEd4mHvoCUtSqm34VXa8\nCcC/s2Umb/yA3lfdtTmZtr5dS1v8o6xNCeL60StIZM0f5LVNAbIN0yHciqR5\nn4ZYq2lQjKa95fiHx7p8rof36+hCJKuFbYQiBxLoMLb300NqVe3WYlc9sF3Y\nEVD1pWty2I/837aa6fL75sPu6Lx5Frvi2mfaSlm1ifNCSpNY3/R3Z4XvyRlh\n1HGKB1+t9cyLtdbwun0KuikbPgsMC6CyY7V9AqT6b8B/o21epH0Vx1h60QQ+\nYWOoyIz1uhKNnhharUm+Kmjw3apy2zNnsqJLJIzLf+XVFrLw9BhQ08QmVnUA\nST2Ve6H13jITG6mbfufIiEVKz/XwURPUB++BJFAxtD1q2OZd86k3G1mrg2El\nUnZ2u2NoMa5ZCPzCNgwqvfyJmLOYVwml1v9Pw4La23ney+5gTuYccbTnsMmj\nXPmbbwBsy9OQKg1p1raZ2iuZN8VXvkpm0NK8lZwr42OYWWvG9NQ3TZIxSLQu\nBkpoZqKnRtaPPN6K/R72oKPtDF1mm2MflDFLu4srfkVk430Clv3UXUn8mh4D\nTs1J\r\n=X7cw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRWMA2Is4p+xv/Vh8YzvKpY6bnirRQ+iB0ZQxbMfCEcAIgGLZpYlcVn65b2+DwtNOa9Z/ymtz0ZJUPh5IFi2TYELc="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-v2.65_1596596749025_0.08586374509893058"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-v2.67":{"name":"@wework/react-floormap","version":"1.8.7-v2.67","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1-v2.69+1e46b13","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"1e46b130d7a0fba3cc3c1209e37b92c3c2fcf69b","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-v2.67","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.19.0/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-fLERaSDig9xDVS/S3W0EBXwwF9jfKOfNHKK7mPsf6kEOz4q5YzdG7kgcAJIqH2viblqtrh2ks9jxkVQ0Of1rqw==","shasum":"2e990221ca612a2d786e1f242685e7780d01fc0b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-v2.67.tgz","fileCount":18,"unpackedSize":253215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK53vCRA9TVsSAnZWagAART0P/i3fJ1oUYYB9FvAMseIM\nGcn3FADluw46Y5Ja1d6IUwW0odA52NdYsDE3NcagGdZMfqEIzOL+d0IOI2Zq\nSWzWFQlVG+PVavEeEwq3efm30y4azfq7l0DuYnqcgMvfuWszpwazrkMyf7wu\nkc0zPb2HgXqgCwcHR3Wa09ix1FRIPMuh/S+FBlX0MJWj8oB2AUJGEu7Jwl6Q\nHOSrUyqzIC5nju/iSij6tDRPDAo/2hDc+IvBbw7BozhmDPmdMaPU7gSXlYtk\nMhJB171vAqpaPDn+Zn3YQCE7fWyMk8jW5/bA70tIDfJD5iXJv+Zso+TbppZ4\nmOxNOm5Pg5m7hFTN1AnrTaHp10s1deJlpMiSVgyLxL4gPh8nLG9dRxy27pbc\nK62kPfGgBI/kpRhtpqO2naF30lhqw62IYrYj6x1p3lMa240rYzaQYRGPIY15\nptSG+rHd7OoNBHv3HBMaMJ7LWbroY4YBKNZa7TWKYVEJiXJ/ZvzCMJR523OD\nUes3w3OLOag6RPm4kt/LwkFs+A37IyO2KIv0DhFBdpVkDM4g4wfnWRgRZTrS\n8rBnwSfqoSWKCrvFhOfYOCKMsXd6ehF4shDgslNvrXYuPB9GhMTNBy8n6UAq\nM0FWQrZ4Myvbm9o8Ds9mAb3SqdWh7oeqeW/agLr1VyJ2fZkECfsZXslcWuqy\nojZo\r\n=HZ2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOYQf3w6cFP94optflZefKXudEu7Dfm+leZ59Xq0T3AQIgBg0oOrMaGvtHZ5glipSfE0PXcWtsspd0fPCXZOd0/24="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-v2.67_1596693998869_0.1583274125576286"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-v2.69":{"name":"@wework/react-floormap","version":"1.8.7-v2.69","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1-v2.71+cd0939f","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"cd0939f1fe1778b47e16e9578fac489f9b61d2a9","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-v2.69","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.19.0/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-NRI3lGEJGe7KihsUnDXeRTPIu6H5e09WIyLAKChciEbFzFE9f8toJaYKxgh6/bw1D1TALbB9aAcVNMfxg6Ikeg==","shasum":"a8bdcc479d44ebfe849a1532cc28cffb2b7e496a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-v2.69.tgz","fileCount":18,"unpackedSize":252979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMq/DCRA9TVsSAnZWagAAarMP/j5Pj2GDQktuLSk4CAQD\nyuSXWH7P2/ko4Q+7TsPRSPqFik+Rk+fYk1dTO9n9Il4uPHJMIV4+LFf4DrOw\nbhs6KI4+sORCpdOfw7AnSO1LqiHswSi3oQ5N61Wk6rNC0zqApeAQ8PuQqoRw\ngKTMdiucsAJvIutYtrD/vwavhAIqmcMOqJYL6FKyFAeKrNsQ+wUy/gG1IcR6\nTlTzvqH0BTcG9j6uab29xXkSfuQe0k8SyOFF37xyYzivW+jA/ZIXQJbKSGQY\nxYCL3yO5ydhxD0NUE6lbgZmrKF9ZtMb4qxHe7ET+L3ocNNrjNYFU2QXetV7p\nEFeIY9pHkg/owav98gKJ9G16KC7Uyk8ShJSWgq7eJ21acc/Z58C2NkK2fH2+\nIHd6/SrwG5KDSRhKbMqZhlLxXucWEAep/mosfUbXGBBd+ElY+ldbOITkVvJc\nYWRlKZPdoSyNfpmwqKAXT7PH4CEmL6Efao9zeH2BG1yXHHO+AFUd1jNycQ1C\nD4Lch6z+ScCMlloBkqMyz5cglN7gjcMX3xgYOyxV6Qlh6nGHbIZSIbLFBPxk\nH1TULNtIWC5lj5Q6RlO7OWkQxbEqyz93QmCo2SnniADBXpzZM6JYxeaW8ELm\nHNqwP7lXOJ64tTGdVQyosfGrWQaOO2g5Hk+567l9N+XvdUfuW/s5NGDgzmL5\nQ7so\r\n=wAE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5td3Orrs82uLPVZsShWqRg9i4GpJMv1FcmTKy0+U/cAIhAIteXCMeUMogtBo+11KZYVzy4Mt2jonwIAILNFZnDfT/"}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-v2.69_1597157314558_0.01580662245455633"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-v2.70":{"name":"@wework/react-floormap","version":"1.8.7-v2.70","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1-v2.72+7a34636","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"7a3463687d1d870844f57cb228280ef807bb17f7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-v2.70","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.19.0/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-1ULcmc5XB472wBcl85LQkDzJT+8DDfT4O0bD4P39j3wR4W6Pzqu2AyczCASrYSBwN1bClXHSlwsWojLRkxR4+w==","shasum":"1090a87312265aa6bda756b7f586049422ed1880","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-v2.70.tgz","fileCount":18,"unpackedSize":253215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNLfKCRA9TVsSAnZWagAAhfEP/RHVb8qzOrVEkhxxofOC\nk/ivBv/HgO91nHteLBa+NfulRYFA/LQVsvuf53bYU4GlbUdJzJiKfoCl2w5T\nbGVCVNC38YhLnW9INI88uRc+RFbSuXbHmdypkD7FjmfYy1xUGzqPF2OCYlFZ\nFE0g1zligUGV0HuCO5EGfVN3gQCaI4VzYVD6JouKHxrzo8W3piB++hBDDtjl\ndsP/D+p1EQLIhUqSTUy//mThC7GB9IisTjvdjRBEso9KTnhCVHWyc+CUoAyK\nHxTu3m/8T2YKQAyblVblCVdxeJjLIvUP3Iy80AhidYH8kk/Cug1HylSBrSoy\naIMNuGsPubLYqliJIrFK4GUTxXhZ2OPZIVRCQlKCJJxJ0n4uoz3eS8OuxzAa\ncUfx0EZw/Mzk3ENhXkeBcxT/yb17/W4qsfH2m5zC11+XT/0gH/XgsH+Vf+WL\nOI9a4f5Pq4Vo9cVSUXK2p5+xhD1+CaotSA+TwMvXqTWse7O1Bj5cU6c63uto\nlHflV91PklfUlhzoCBxucS+/aVNk/9DKjsdXb9UKL+HDQb9nW3zs5quXCxZD\ncyXFKXDOVWGjyBqlWgkFUdP4f3dhXqK4HZZSjzmTPHMr9UjRBo6BBdprP/gS\nEu0AL0BImFj0w5x/UMIC/px2MxaDd1y1EuQikafR5MRaZnQn291+8XdRBHVA\neZQG\r\n=A2XB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG1wyX2/mi8UlNLbBZ1JatutWMsYr4Mx1gAVbfE69ziLAiEA4QivQWnNjwxnGAcJbmogvC6CouKim6TM4xyk5+GNUcg="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-v2.70_1597290442402_0.6219821470155382"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-v2.71":{"name":"@wework/react-floormap","version":"1.8.7-v2.71","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"bc8d043c4b7e69743c2cd8d0936be7fd0f63a7f7","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-v2.71","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.19.0/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-yj3JDyiCmkVEvMeRr9843b0cP62pQL2SX8e2k57X/sZLS2vzzFt/1YZhvgxirnwDv3TDjrJh09gZBEQN87a06Q==","shasum":"5046bed14137bd0ff5219eb2d32db305e0c4f460","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-v2.71.tgz","fileCount":18,"unpackedSize":253255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOlQ3CRA9TVsSAnZWagAA2YoP/32wKa2zbfIl1supQXhB\nowi7EUPR+LzUxKPd8reVMmklpn1A/8DFsxBeP+zH3PYoVk9ZF5xWuO38Kml9\n5vW/3jM5hX63JC47IIcdhitWu69vHEfJ0ArmoJ6nG2mTO9DrVy8/V0jJMkg+\njW9kXKXknw6Xx8hzShD48n9u74kLTvGCGpDIQYGXEuiWeDMZZtZooyg9/saT\nrEuGNkeFJbv8sJaUfHbZMDzJ3PmadC+dZIlxflNar9LEKsLNBPqMjKxJ0izQ\nWeq38blXuXwTMsW3U+ZDRyhtnw3pSkwG+7KHfyrWfbWjLrurw/MjNOfv/09w\na5aEsZqzQtVBrgi4Uc/FN+Au69/z5oTa896YnEBYp9qBZ46CYTtZRVrJQcht\nKCNnXVmJk7XIxl0bfJI2ZRpMzUIDBvG5iQ6imEmV8Syc0vAo1/CcgQHKNpP6\nlvND7QzOPwm58ynhOb264+jC0XVy7fsa/sUaJG+A/C0j2G8iayBJP324s90C\nkibQ/wENf86SkjPLOSRCfXiATl0xgG1vmvJJHzn/4fL2I+BYLRSWzshIenGL\n26A3wCrisWFBaGLUwNhKPJG7r8c3cWZuyDWYZDlN9jlvFqw8UBjXUb+lclIO\n3Pksm/DkV9T9h/FGS4C7SwOpwBUYre+3Bl8Lf8IlQI3SKfq8gCgQb8Fkl741\nTbf+\r\n=81eS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeEqHlV/3mLqLE6A9lL3AiXjapBX+Z3e9k2WD9BK92qQIhANUc68eExxtiA72psMMDEdmI1FhH9Z0ARZv3qh4h5oAE"}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-v2.71_1597658166696_0.645730374941621"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-v2.73":{"name":"@wework/react-floormap","version":"1.8.7-v2.73","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1-v2.75+c7737b1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"c7737b1985a08af8964aaa042232c343b232fdcb","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-v2.73","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.19.0/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-rfhex87F1m1hLH3iUaUlgM2zXAb4Uj2Fal8iBKwLJdicZ4eS02b9Ws9WoyFPgVpIhWTC44grM7cyZhb8YIhN5A==","shasum":"09029e02c5abc343178fae5c831d22257f28ab38","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-v2.73.tgz","fileCount":18,"unpackedSize":256677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO06YCRA9TVsSAnZWagAAII4P/R7tjsYsrlX/PUDEjFIU\n5z0vCGq9bDGF11ca+mFJ3WHntPOpx2uvSMdd0ybmjHisdR0ObJjAujTa81uw\nu+Kdtw2AuZdfy2fdBEswClFPKmiURVHG21PyIyOA7lKeuYc4Pp8jRzXKWFTv\nsubHFs3sdAm3z8Csn/oAX6IC3bDSZa+X4lsKGP9A6IZ0VbGuZtv/P8hGN47H\n13myZ6EwLyse6IfnoakX95DSAc5xDJ7E+psCtTc6Lr/lYG2SPvXG1nk5pcDn\ni0bxyTNVnKeDDQCZDBje0c6HTU2rK/fFk9bFAYY6G6PNtZ12xMgbf5uwp7Q6\nK94ZEOxmoMv9BodIlYzXnUBWA6OIrKWYyM5mzymqi+BpKkUYhwfiWYDabPHT\nF6pv32ylbouMa2M0lHWln6YVfBGK8XCy1PfH0RgQRSHqLIZRBl4psv+YZaxh\noW4pnKLhQtT07jhqWPjnWrTEp4z5eMjy/bM1+WIi7nbFbamcGjxInuw4DkFK\n9h8QlFl9DM2t+xkgH5sEaAGkKbNNtyBrpNBQ2Z/ondvhH1Jbzs+OgCHkAcAs\nfLwjRsqMJJOhDS9/MVMVnRvYA23/gFOClTzfGfwSposSgNspKxfmtMW9FDOW\nT/FxWqSqH+rlpTfWwwvYlevWZABCen6uMcV4xHo9gSraKJy41tAuPhEPaxCg\ngHBt\r\n=1Vn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDP3PZxGX6Wwf2QV3998IUb5YQjJmJoD1ZAnaLNGBp9wIgIXbFmeWlYh83zcYXdB+oqlozqPDhDz3y/2+iUgpC5B0="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-v2.73_1597722263846_0.3696414740012919"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.20.1-v2.429":{"name":"@wework/react-floormap","version":"1.20.1-v2.429","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.20.1-v2.429+df8328d","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"df8328ddb822877f11a8d64ab3760e5da94b9fe4","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.20.1-v2.429","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-YzPyIfVYYZzYmr1FBtuu0NcgkPYaIjWuChSEG1chcbhNagE564RH5bMx9cLfgOKFNkiFLE6vpQBXLm0rSZ0VcQ==","shasum":"bac1c9d2faf9ea1b6b782b5f64a3632ad8ae60cf","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.20.1-v2.429.tgz","fileCount":18,"unpackedSize":256728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPzY9CRA9TVsSAnZWagAAleUP/jrucZys8XHjteF7HBU7\napLG4CovvN/cMItvb6wu2pvY4rpKDUgTRVI7wDiL6mHRp+cpS+Hyp6wag+Dp\ny1/TLH20hVT9TvTerNuKzeZUtdUFqvDE6pPHViyNGj1dfg59GNKYL6yP2i7F\nySRRi4zvITTE/iP1Mse+2m78PVN7X2HAcgE332dbE1adtstOpySMJaT+kep7\nscBkICqJ89sJDYf/D6nrGFNPks/QoLNBwrCZp5gAAKl2mM3HTIJIOqE3G253\n8HkSqr70aBUdAru/oTjJrxhhGbEEbA2LNIxAX69Tn398m8kPeFc0yB3l/b5h\nOfhubdsFaiKwVQkQLoNPTaSLPmhoCVZ4skXzrq/OwU3gKH4wvhtoG3PyoKZl\nQKCNCKO9tvGbRjHk8j4CMAAf1RZEN42q/FJNwcQ2k4L7IZCC7oEer+rgmsm1\nXiw/gBe1X3UqNzvlpkMJTDnmuoFr9yxWX0NGokFZoV5YJXu6tnr+rrVBeN9D\nNM6EJhMoTdcem1DBfpX5ekaEWpn694sLIprUN2GpE+L3ufiBbAZBBD6WY8hx\nUaO84UYJJKu4egqlCtwqn42Wf2VapbRHjSxoU6BD5Of/RGYhpu+A7aFkqP5d\nVW/yuwwc+EsWcPoubrtzF0WI4sxhJgx8f+sFFLgrXnncZMCIVXJPHfGqUj0Q\n16DM\r\n=czZ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN8lFCI15VnELMj9ruR4PLzsklrYDPISqxX8NAL39LLQIgfUPlu+WutG+qfbviSPOGTRAXqBNSI5Ll3gX9KUTJgpo="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.20.1-v2.429_1597978173458_0.5868233497519995"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.20.1-v2.434":{"name":"@wework/react-floormap","version":"1.20.1-v2.434","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.20.1-v2.434+de033a5","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"de033a57bdb36c75c665db4e9746a35791ee7048","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.20.1-v2.434","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-B0IKQGDNDJFPvnaPfvCtcdx+sAt3OwBk12Ls0GJqhyq2x+qhIi+ltyIjS9QcSE/z/0VhS3NXuLDDfD3IR0MCyg==","shasum":"947d4521e383075ce9f6a211343124b0edf5e651","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.20.1-v2.434.tgz","fileCount":16,"unpackedSize":260063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ5WqCRA9TVsSAnZWagAAB9cP/i7dKvQD2g5Ty3TDSLnS\nyt+2dLnLO0pulxFgR2M9lUxVEXcAo/90YJyJQ8MVJ3TK15fCh5u1yWiu/+Iy\nrK/LY5+KEHUNZMEHkXZJbc0nPln4zTiPncqP9xOpfE8I+q8pPfdy4QoewCo2\nm9FJ0VeBh84itEtHF7vPaOqo6gKRv9inaNPPr26FXgK20etoHXiVfbiUJ4HO\nHnvvYy+Jd9jmdhefxCkUHb/l7jOowSUDKcYo6xMqqSt5Fv08oLASgYjwPR9c\nUlQYC6E/6tZCShRTcVeyTFz3rgG0gwJsPcfhZdudF2UGu6jsCv8O2DxX/5UU\nqXY+7qie6OjueDmWyDE9V1MuQ4I6wv3weDgeSjESy3lI85KX50o9rY+kKUs0\nWc57YXP/tE1AvPwZZQD0omSyAtpbyEu+xv6cRaIcArxRkzKW9YhVo1irI/ig\n9Lz9av66MDP6H1+KQ1ZL1M0bRYYABLmM9DnEo5r2xIadbDM4Qt5QmuEQ7D/W\nFMGPPGBnk3T2MggxVSiVnQ7+8MuygPumt/s4OtjxIBf47gg8IyeNhAVsgrSH\nwdK8Qbx7tM5fng1Lewdkm1I41DY7CjbFPHXHyq4m9vUwpDBC2h4Kjgg6jeRO\nhLi4B5QSN+8ip3DBvLX2t/GyQAgTfB4DHOhF7wSWGz6kXLBHTCdUCzElWPq3\nOGgQ\r\n=Tpno\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDEsaX8W1FPvgHuRjNUMY5dVkiHqnDUYknUqHv0vPxf/AiEA1t2t81A9P0eX+HjFDxvOrx0xjCwXhieYKjLzIEwrnQ4="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.20.1-v2.434_1598264746286_0.3483161682365581"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7-rc.35":{"name":"@wework/react-floormap","version":"1.8.7-rc.35","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1-rc.37+b82e0e2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"b82e0e2490ad2b82457cdae0b7896c4c553b9a7e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7-rc.35","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-svkfJ11bs3exLoNIFCdOnveMs81VHwnei7PrdZuGqeALk9qkWVAs8kmq0pwz6QGAK4DB8qxk+C2AaQJ8K0dXmw==","shasum":"9a3c2a0188c3555f7f2053ab027ae00d8425ce87","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7-rc.35.tgz","fileCount":18,"unpackedSize":273452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRMvwCRA9TVsSAnZWagAAct8P/1AW9VBR8Psvxhmb5AKa\nh4PVMEkxI615UIjmksUG/Hhtm1jy1Jz8QZ78gVJ+ysuXst18OmUm0Vrw88h+\n4hL2YH1kyFxX+VdzvlpE8y4cAQHJNBca+wifKfVLcDQyJA3lq2TqINwtwtlH\nHYoRJD3uNAU5CEzYM7L2UkN+nAXfUsKjl8WukjDyeatL0QOj9YX6iugZwgqF\nxnEl52Bd52UPM2Bge+w730FeFMSzBa85IhjrC7glp1wrGpmo5bN+vp1PC7jx\nXLXEpfc0AZQYveh/0kUs9QMGaS6xrE/q72ReY5RP4J+0E7ikb5AP/CPhwxV0\ncNCX35e6qKxxhfyuYya4yRECfns18H85RR7xrIvo09Bvaoplno0cSUdZYi4k\nJyLONTXMkQx7f1yqSy7iOziyT0r7Gd2l7SFYn4h1+ztK8jGDJN+lzalD/JKu\noCwZX9+r/j36Q8D543ODLs3Dua5OrrBAqzlNO4vAzVTvVleMKA3pbH+a9Y/A\nyae6/o/ErEfODTViBm9R/cfUzs6senq5fPDfxaZQxRzFWrlnyezr1L7677lj\nHBq6h4Zz7b3rZ+7Y9WCEUJoQbJq7f2UPBRjjyw3XM7jtYSeONoxqGA/pot9f\nkBZBDFAxSD7JvH9Il9/bqC2pM3pKtZyQRCP+Q2gX/HYhCGaqBQ+uGu9lPpBA\nE6gq\r\n=v2ze\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGY3LE9gAqVcDQ5cd8fyiXZr1YExmXciWIutZNkDmckAiBEJrPz2ztmP2FiRZDbYZeSbHx9mJACMFdC8xhJdPVi5g=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7-rc.35_1598344176185_0.8448967052835332"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.7":{"name":"@wework/react-floormap","version":"1.8.7","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"a24b5d24a44208ffb7e364fc18aadc54f832dee7","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.8.7","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-n/Kg9ztg98UG3BZoOQ9a7PzNTxOmx/LsgF85Wy5VnPBdhLSY1F2qTVi32JSZKJOZQjr2zZWH3B8fN4n4pk8R1Q==","shasum":"838812fed0f740468f6268f054c7877c2be0bdb2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.7.tgz","fileCount":18,"unpackedSize":273633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRMzjCRA9TVsSAnZWagAAHKQQAIQB0yMBmAf2balddCGM\nHQqCgac+bMlRyct9QKL31fzb2j07LXGRu687vd2EDv1sASW8hT3NORW2DY06\nrRVS84uKE094mQvzWSDKfwcltKtvBHWBmY57ywlCVwr93yjNAbbulRG47DZV\nDsQJjChHwXQirEKSmKtAPXfcW6Jsx7KBn35ghfiVA09zscdT29obz6IAWseo\nA6RC5S349+Xn8uOi36IdS/0dSj/5Lmi4Z79/o+U8VeYJHfXVgsGajrMrN681\nyCTPLSa3BhZnGSDzyfZKtSALuj3fZk8cem14viB7XgAT505PbYdE45KdHkOc\nAZq9bQ8S7k5Lpe3WcjRk/q6sWBDMA6XTv7Olj64a9SV++6G/OvcXltntXcT2\nje8c7WBZzHd3zggQEvLQKin5OcyBvgN383LfM1yv+aa+vHGQcUkAqPOYv2ln\n47d//P9g0n5rWG7aNxRC7yOjOZ8VmA67cxKQHLKxGHprLtzQw0i85mxQ+icw\n1vvoLmVYXdo2jjWSAo32MHyRk2L/iQK2DckIwgDVkH1s4k4frVseAVyn/2p5\nUnPrWXp99T91h0KvbKjuUYU4MIdXWqP6OaGQ9KI05AhD+avf6vSwgu+iLY/p\nOf4ZsL3nAsRpod984GV4vwMl999rHNE/DoWtEJs8MkuPTdTOSiZ9F8U52l2I\nYbIj\r\n=Ie5X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVLqnzyzRu8oTFukaXqD+GGl72RyRrilf/c8PFeyW83AiBR/dSGrJ0s9vaS2Q75ki6gdNiOzygZ+5f0ro/UMfpDqQ=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.7_1598344418607_0.722756135625348"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.20.1-v2.436":{"name":"@wework/react-floormap","version":"1.20.1-v2.436","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.20.1-v2.436+433c829","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"433c8293289dc261dcf288dc3dfebed55541ec74","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@1.20.1-v2.436","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-BHFT9hj91lzOrWK2p/kTO5qrwa41W11RtBAo4Qyb0LSFsnhJKaKGXeaA0DdQ7j7Z1WcCaT8V6Fu1dP5QMDt/wg==","shasum":"60279569f6c5d870b59f16aa13ded19e7b5936c4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.20.1-v2.436.tgz","fileCount":16,"unpackedSize":260063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRgYCCRA9TVsSAnZWagAAruEP/2N7NiTeEsrP31sWMu8T\nXLoTo27TCDXcYkszFk1K7vk0P3wJ3gAQbEMKp8GBA7ukaDMEDsLIrbTcxzjw\nLwRhjeCPLkNxVOz74e0lwoPhx2kBcxRRgT2s1ErABWCX28G9W1D+HzPLNU2G\nWIAV7XQwMLHa+JCmXMAtgSVWV1CkKcmmWwNMXKoW/s5K9mPgWQYATSyF9lgA\noof6fbK6Aa2AtRRfx4sHh6oJAMEWTYUHy5TsK0QDEUiWHytUd+IWpnxWDKpU\nAnk02irQdTfkzjKcTpTuL74RGe4kDeb3qFR6PFukqX3xW1FrJSB76dSKgSin\nWxocKJg9kdgUJ2d5+Xv85H7cBOn3t8xYY0RbRnmzfpDDpXDW4BbZ4BW9mN+C\nEsfpgFPrSNYzZCwZOt5A5NI1vVKUBzlkNbhTnTQAvJfgBSjBp8THYS5cMuGO\nG//P4EQ5pc8jEMCR1YbdBR2bcF3Q8y/SWgKAeXmLqaYu/74q0/BxYPygqk/M\ng4DFkjQ0bQ4UiXX0v+iMEblkURC4liKS0ZRycczpzy9pUrpXso+E/iFGEUTP\n4wlrDlCOh7wYHv8HBemmYelf49kY2jR0uXzeJnhujPQOj//cr/9ghfxKCJv+\nJgVecnUYXFX+squN2Gdzx5XQ/ZBngrEUQ4QMyWoercYn188ahyQNfgsfzyQQ\n8zga\r\n=Od0t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEqexd9YVjyZnAlhXY/g41IjW6WgzORshvN/2Gd+KMSAiAgl2ZavecC+iVUQ55Ab804w2e9D0eTTCGtCA9Bb73vgw=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.20.1-v2.436_1598424577803_0.1986631700364081"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.446":{"name":"@wework/react-floormap","version":"2.0.1-v2.446","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"74141c6d9ef8fc59e69805fd4dd204477280fc47","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example)\n  - [Access FloorMap SDK instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.446","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-fVwVHHk/NMPBu1tZOStI5I1YHufEDxmoRFAgiYBE7x3QvcKmbuhvWqS5dMBfiU+0TvAQyX46rIpvITeFmlWPig==","shasum":"9260e0bd934261c8c75dc7226414e1d1014a53bd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.446.tgz","fileCount":16,"unpackedSize":279508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSMCCCRA9TVsSAnZWagAAhooQAJywaUU0Se9S1seKeRn7\njwYowdH78aM9kmjv6Fa0orI/32MMT4FME42ct4JEEQW1qUDjLmp57z+nJ5g2\nbpjL8AsbHp/rzJzTJV6JeB2drmQ+1vFKS6Ttkg9eyBDQhSj+si6aR/TMoIIL\nTpnTv+ebVuBH2OKMgp3lUxVIhygnRCTtxgkHnXR6d7IUrE6qTJM84lQ25lKX\nt6i7NXH4axJqumdnzmKbQzPb1UL2OEnJVKgYmO5/gfClpFX73HxC0EVPwpZk\nyWhVuqq8wGa/jJRZR8q9XpPLRKGAeCz3u/11iElBYbH50sHQwBoRGDhG1R+S\nztO1CBcXstttG85z8YU9XGPyukU7AD1Dfobglc6dQU9XhN3sjeev4uMdJGep\ndctZNuhmOT0BFjlov9haDv4lrKXnTyrXiS930PS+6v33IuBP0AfoF/A48eng\nG1QdhEh5FoXy1dL8oCnbVZ4l9sMflKQsu1SPURIBE/73hby5SvtFlzG7Qczn\nQe3NsavmpxG2RRlmxU/xCrXeQTIGl+AG6qhxInaA4BO6ryESQdLYExB8jK6A\nRkbfLR38cduDtJiJE83n1to7sIY3i0+/qtZYxt8RC8udcretOWf/PgyjiFLx\ne6G1Sc/3Fsm6Z/Kka4YxStGSj4K0FknIW9ovXoubgENd/wsz66glRaX6/B7s\nVk0t\r\n=2Wkh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCseo+QzEPl7MEztxRyvXuI4TtQJ6JvK4VBx0i5EuvdkwIgXysaBzWQ058NOUA8UJRIkqsNie5ZNqP9p6t10V6Pu54="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.446_1598603394222_0.16160202516848932"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.450":{"name":"@wework/react-floormap","version":"2.0.1-v2.450","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.450+92542ac","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"92542ac5bf731f6a9f8491358412d982e34c7c1f","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.450","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-7KL9r1yJtVKItmGw/S2FSaGjjkTa0Pd8rIjPLiwCY8HcyWt83xES4uis3byveXtziKaqg11ES4a9e3Bpg+2kJA==","shasum":"ce31bc75fb4e23eae5d041c9368d5d6e5178da74","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.450.tgz","fileCount":16,"unpackedSize":278582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSPeECRA9TVsSAnZWagAA77sP/jhaLFVvRaZOR33oUrdT\nfsBG1pfoKEX2LTb9mxeSc2tlduKtpjt/UaHeuaIlHLATE83cV7KDmYiQOlYR\n1fCR5oVwu2Fsr5mFVPjmSjXNFr0ytOccrLXQpQ+cUs9WhNly2c7UYz7euBES\nE3tviN5W6S7YlI3o7FDlmxyDYOu6R9XNnGf0jDDO6Ae2DxauWcj22/eF9g2a\nHdBddm2VUCznlXnV5YhmYf0VQg0mX9F9PIgYhNmpf7UYY6aYk7kKWCyZaIwX\nuWpjCH5e7lI3IjDma3GQ8N4N9+SOcc9s9dK7kLva/Eiu4DM9r/UCPhLqDvjv\njizEodvWKmWmvHidVGoCGE4UFsjYFazOokFRdl0S0U8Q0W6nBtHUeQDHerhv\nSBEIWQzv/7ClTOs7ySgoWtX1sJibd3kGyXpVZIR0kPbzCSuhf1BEcL4eOW10\n4xzApkKLgDN8ExzsXzmZ6xJ3CohxBL3vyjX9saqEJ7BvtE1Tvw2m3/aynxZA\nnxbVYr5TTL7Mxp0ejugKyvm5QfCvNqWXt2D+5Fh7kju8q0bo9J14MaakZJuv\n3qcOWMCEf5sZjONah+/0Z2Q75uAbEm0yAMM5rJxnuCL8gua00HlufItZ8Hvq\nX71i70zEsq2pTiTz4j1F+UWNFX6kATzrlVDHSjB1g+yJUE4gXmhpGWmWWNuu\nkKr4\r\n=egNd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVIGSzvqBC+GvuNf3ZI2WEtZXbatQJpeVwfbcxDrg9GAiEAs1CF/kvQ8kKThBZ1bS0JufCoil4QABFEbz78ZYPmMXU="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.450_1598617475696_0.07531292433410042"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.451":{"name":"@wework/react-floormap","version":"2.0.1-v2.451","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"07574f992245b23a663721630cbd12f93a656829","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.451","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-JlxpgNBi1x8mPeXxAmK3ZYD/Af4GJCWEU56g4DazWb0pYeTGATBTjFF3kWQmM3hkBReub36vkU5sZNos7efaNg==","shasum":"3398aa2e6c5e804b5404471545875337f9a2ecab","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.451.tgz","fileCount":16,"unpackedSize":278715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSP9BCRA9TVsSAnZWagAAT+wQAKK+c1ZYtihAHg0xMxih\nqjCICxBrUpzqfYCU9FocH7GKPneST17+YS+KKhkbPT8BQKQYf837ytccImbd\nzRuidoji+gcVcD082UoJzAMEnH7cmDZp2EG+/R9/EvC7x6AHj/QVdYhWUGks\n/4J/6z9/GqUPBKhHNCJKEij6L5+vFh/vHAol1jGWg086iLaSLzpeqIpRJfEV\nxzoZwgbmTu4FvtUkmvgXAaL5Fvl0Gx5h3GowDROGcNgRiQpAChrmv9jUgnAj\n7IZYLuK6uBksvSrAl2nWjLyCnnBxQHCM71JchQCDoB77LNL1kaeQENP1HVju\nIIaRMBn4XsfzgMEPR1L77U139h2mQYNhZMtDZ2qnSMyfRAGCjyEpJSKorR6f\nwMtrDO7qfEnh73gi8EDnXsr8KOEFc2GgU/fBXKwHjVhodeAgIRNsdcJaC0Tn\n3ZKk8Iytw0Qah72rILpc+Vsx18zizJYzp9YWlG0TV9yAYgJP2N7bE5Uz/1ye\nhyyUNpxYHUJ2iimZLdfi3ZqaZQIN4IzYodn7EEoKH+TPyBkVPCWSsbbjM+et\nlHUtZtH3Aokei6ufUuTtS395JFkDv56DcDNCOpnUaXb6PGzlTZLgCcGHXVgX\nTRGlPp3V1HiOJfgnr3eh5gmLOs3RDihLrH6RwJorP3WHT0hYIF6GTKXaWFnA\nnxyg\r\n=fP7H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnJhc1204NBuDvzEkmOeGXCggPpqbQvX+gGne+5yhFQAiEA+OUdz2b3ZidtuRdDCpTc2/Bggr62H1j0SHzzdYckYuE="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.451_1598619457279_0.7411855542157557"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.452":{"name":"@wework/react-floormap","version":"2.0.1-v2.452","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.452+5382579","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"5382579e9f63aaa48c4b9608110efb28c12a2d9e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.452","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-c1E0I0Jp6bvmFnXUqx0TiPorYtw4tgRA3a+pqj9gq+K3x9LWVp2GIjI8336xCOP19wJvjCiL9+ooVQSVELQGSA==","shasum":"d81a6ba9c8fff4e11f15bf421a9bc699cb2a7198","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.452.tgz","fileCount":16,"unpackedSize":278730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSQSKCRA9TVsSAnZWagAAAq0P/jZab4MxsAtrkWnzoS2v\nvbQwSbIQMUZ3PDzPlXpd0TKBGaFLChp0yg4M897UEw3DMbAzl517Pva7K6ct\nEGgLqJP+aqUUqs6gVgSZnPu4CO5rXIE8jLeJCH8Og3Lx3mlRpUX/4ah40fhM\nGmEiGUPH2sqhreQCmu46DlhOqBS+E1pq20AK8/35qEC850OkjKd4S9pb5Ghz\ns5gGFQAQjxo2r+1P11exSAwfAG2HphWtbUdiSkD+JbVKoWr5r9yyCTzDMAUR\ngzdWl/Ev5bbEvIsvqYmjeKCD9hHFb0zPSxBPpfA/w7I+Mv2ECG2MWjocXUX+\nJzJbWZ//eOvwykPMV4BY91N7zKtB88tV2wJ4CHWOcNhSl3t58YTYoZFvYu4H\n0l3J0NUBRwLNbll9/K+ywwGnOwJMLfG8k1du1EptOJxzvDynDXRG7l1oHy5B\nUP7Uo+5MimaAWtvV6GOEiJEfzfXBToGfcrdS/ZPwYR7OEhlH9xBJ5bsfDhuI\n3tkFdQieODqHcQYxLrOJiiuTrspVDCK+YTrUomHy//DEDaMSDR1y3TrikhWA\n2yWalAQTX9ApikMEBQJSZDff4fTGLASKXqssNNh95c0ddNB0X/8CiNOdlvh+\ne4Ik5hwSEjJuULqkvB1MF2L8/DOaMnMNcj2FoM8vsii7coENt/T4f9Vt/+oF\nQj0n\r\n=mwy5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNgZCHeuOfl7hy/1ANJSXk9xf3Vch0/m6fFdzoK5i2mQIgMvR2XXX30mM7cQnMa+YDpXPJYzRCVdYO70C996aEUXE="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.452_1598620810229_0.49946232330424145"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.454":{"name":"@wework/react-floormap","version":"2.0.1-v2.454","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.454+e55c7fc","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"e55c7fcfa7162d142de20b853a997ca3ba86acd1","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.454","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-NCfz80qMQ0U0v3V7LwYktr/+6KVuSPS1oSMbXD2yhI88eVIcvOP/Lz0uzcf6ke9lgZ4oGsa3IgGUicPpeXEarQ==","shasum":"4d34a984cacd2a17c016c85e088f0ca78f3640ec","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.454.tgz","fileCount":16,"unpackedSize":278730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSQ/ECRA9TVsSAnZWagAAeDUQAKDQkn/piyDgt3EIIDwL\nKyCzryIp3wFCRtEYWE/yv2Z0POjuWNKoXIPWW0xULJoxFBC649H3FC52TtJ/\nN/9JD8XjUEU0lJuvWxAdlwUiS9sXCXT1w9ynjO+c6j2gj+0bEvBsR3iohZZi\nOx80oAjFRrzm0z9rChUJMUeniWFC2OSsytRzxq5lQPeH/dglWW6kL6/vYtCl\njTriUkZiE3wSDZnnZ7jW02AiRRyBQgvqvaj9yca6+52Un2JHGeBTFtp9TUtp\nzKyVbXTXMjJhsSq065DiIXhkRb5m/UoQMAiZ7tiEAety0Ow4eEpL63gELnoh\n7ZhCYX1ysG+zFAAqRy7febp1J3zZ2M7X2Jp1grd6MahUL2XfSrQ15jv9vAqQ\nKSJOuwaf1afpjkXOazbb2S+yPo1IoMz3WYgLRvGy/RROlxCBc5FTevu3vzQl\nAuWXvfCiqYxQF3S1O8zWE14pCdmd2xoYtKZWEWUIq4PV/c8FrP735VsvIgvU\nwC7odN8FABuGZO0aMNUfpf6KCmIondJPl/98plwTCERCETemgEtewrECcSK+\ncC7TVC9ZdaFzk0x6xxtl8INJPEq9b4y+wogAat67cuwQAi8Q3wO1roVKOHDr\nJreQrIyKAPrz6pNzB36odCDXiaSQYgvRfqpKsbSs1jgvJ4uG4VY4NSwvDJUj\nrGGh\r\n=1WIV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFJczDxDvsZ3hkpgdYslQy4N9y9cSbv7Y0vqJZjQMRH+AiEAtMvDKDTdAy9V1G4wkvGZKAZmzoUedoNHCnPT9WiYkxw="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.454_1598623684139_0.22730366489305487"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.455":{"name":"@wework/react-floormap","version":"2.0.1-v2.455","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.455+af59e63","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"af59e63785629d84b369beefd4fb4d18ee3e08c8","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.455","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-rb9ELH6idhd8tWKic75FizfwY+aQzP3CIHcbqH0TG2b8fcI4QVaYUgkzMaRcreTFbKXJZNSb/J3ELH8n595pLg==","shasum":"fbf494c42f70bbea2b5864295c57490177c43df1","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.455.tgz","fileCount":16,"unpackedSize":278730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSRlECRA9TVsSAnZWagAAVOsP/A09M0ggex7gLPFfvAVc\nxe/fqW0z+IXkBIj743F/ftWCMTVPy5Y6WAO8rGOlynkcmLZ5lGxpnpI16ddA\nn7NZskr9Ny6Nq44tJCOhr56epYOHTDvKgCjbztr4xqYShzsysER/5zg7Ny44\nONhuRsvjPDeWbezeyMGljdpHLwV6ptPosEVvzYL4tYC2WcS5CCdU/VKBBelv\nkVTbqAEioobyNezToiw3tctLljOqn3IHCkdJuX1Q61cOdEXIEJnGjmRljIpc\nHbm034Gdy4BUsYc8DAGDFBmHQ6Uo/gYXVeUoDCflQYA+h5tk3K26aOctzwzx\nL9OsZ/s4wJTW2nFezJHHpX2hSCPqmm7/hf/mqEyNO+8O/obXstMbGFxTsxeQ\nRg6QI6tnSmmBKlxsKYg5yvcz19lVe3ITdyP/ByuY0dlUGbJ1TrYYgIoBlR65\nFLnRQDCTrDj/r12mTzmW/XHl0lq+cQYELN/jojn4aF7VfhgYU2mqWRhGy8kL\n/jKaNF1jZ6wlLYRqQaysvanqShR/tbR594HO8LImEciQWxrKuQdZKbaBmy+W\nPZNw3RL178lmmWf0lhy+seJBK7k0QbmFr3HvTqSb1mblaaaGvT3fBBkij/dR\nekWJvRgq3TclWhd8XeidSKcY1rodt2JO+0sjoXJgd//rJkEFsSNvG8ovs6fI\nws7V\r\n=7GMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnID0SGmtuQxooS0kKV5Ih7uTA76y9PMB0anl+t4AnPAiBVInBX4O1saEdTIq167F4T0VdDDL2/FmwodMm97f7npQ=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.455_1598626115865_0.6828029234782023"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.456":{"name":"@wework/react-floormap","version":"2.0.1-v2.456","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.456+436a5be","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"436a5be9351ae4e2e2061a2a2885797320b7e9d9","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.456","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-Khx3pYrboRqTv2+JZpUHUlwXuJGgkKWyU411N+eW8k7Ud3wqmMe3QtjbOguzaKz3BpnMAFeKUxJQP3NC6XAXgg==","shasum":"790ed5e0fd9d157de14a0ec585361b3e49d34769","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.456.tgz","fileCount":16,"unpackedSize":278730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTNHKCRA9TVsSAnZWagAAIVgP/2+bgAGPjiTn0UDyiyft\nJetQPDOsC8HFdsxGw8E7lTwMsruM9St6NxvCueDsKq9cdOazzw4KMy4WCMBn\ncxbzIPeUpmSGW1R00Zyx4yAUWUjLn8v+wJx/CNkwoJ5pf/DpzHxRBA4mrl6p\nzmG96w4Rerooe3OwwQSnmaJ7a8Xp7JGQkIYiIlv/o13Ky/kGp+2RzcFxn/M8\n5aTOJdbovuPBiOVyYIJG9t0iiUsW0sTcMZ5p3LHjrsmHCFSVZn0jOg9augJN\nu5YG2m4TmMRjFq39fqR3aKq2pI+m9OAL3bGExBTLmjCbI1whH5seuN7oq4Lw\nJs4A5+IxChaoai055LPfO8rE3MzZfBltYaMq9OLn/9AsLR9N9NFmjaYkX9Bl\njJoHAC8L2sz3oWV77sA/+Ob60qAR3IYzR3BCRxDGjd3c/ZjbflPgDbv01zdH\nQ9blFUq9Q7MbRqgWSzqXuEdzaqvpomzbU8qe4EVJdSWGE9kEhhz+re9L+mrb\n3skQ+OhkhT06WdxDJlSiZCopx03IbCCVb46KVSey/rU0yDDvUjpKTLZwHTVC\nWuiNvCF9oT4MP3ABxe08opN/MtJwLR08lvkhrAxSnNfRkBdrYjKGpILyNzM3\nC2PRdLyChacwBbCFNoZAK69yz9fUiIwxlTTySrG0kCE1azA7TOPhzFRblfcx\n15tI\r\n=TB7b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUWE1lBPXAVPpxlNrGTmA/nZIJSRIUB1RJWOr0JRXlLwIhALn2y38BlXoHzeZ2jTkdEdFpxYAnOaW+dPr4YSmJ1EU+"}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.456_1598869961759_0.15892767073685898"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.457":{"name":"@wework/react-floormap","version":"2.0.1-v2.457","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.457+0a3a2d9","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"0a3a2d9cd8624bc4d8270722a9a0e31d6532299e","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.457","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-aKCtkWPZSZWFxSxIT3DZ7uKWODZOgLEhLfgc+eKMagqqK94h/oEzSp8KMJIR0CMahwpEhuLNNvQg58G1cnhnmA==","shasum":"7715dba632f8b27893bef8ac0925b385b8628564","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.457.tgz","fileCount":16,"unpackedSize":278730,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTW/uCRA9TVsSAnZWagAAFfQQAIyu8Go7znTx07E4/FIK\nS9O1y6eU0jft4Hf/rzJ3HkL+f1BZBr0jWpHL6Q6Ofov/D9tbYY7UVbEdGI0d\n1psQLLenJYywWdQnIIUSgjPMdR5cZMDOlPgs4bMAPEBJwNceX3FsJdp9Mmtz\ntQJvKwSJNwex8u0G3sSLWu1/Ezsy2pMCeZ8HaXLZDscADU7UM52yQcJuucar\nh9L7gfIsFdgEtMG5PZhw7feR4EUtxMoIZAt+ygim3fv550mZkBxwiMdyuuMR\noJbtXEQWkHWD84YrShZ5F2heQHdiVLgD0ajx/34DS8wtn1QerLJhKg56DPMA\nzt7uC2LDs45rh/QH3y1k7LEjJYrOz4FDbDrXMEOEWNqx/f0bPzehSA6h9Qbv\nJYE61xCOhOr3Y96P7MvpOOUmFD3tdL7W8kn7KkiffPOQkSBhRvHro0jEHptb\nALOrlp4+sNuqhIAD/wHG11RLP0KPSDfTxBduUv++wI60P+OMJmpcWHrQGEuU\nFBtZ7bIq72m7kOowCUNsnxpwdpdHWROIEUZs+1USJPpp5nvOAnxYWN0Hl0y9\n7q73ZNnbWpSkDjlZdeSYQUBLsOwrGLl1RdJ2tf3qoEoT1XAKWQ+VUqD5wRMP\npAKTsFlFops1lTO1wjG0ExjRlEvMgwrB4SygBRyjW2/C8JZIDxo0LMSIXZWf\nxMgg\r\n=KZ+A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5scMWL8gOKQyrVCVIVpzp8nxKpq6z/hq1wI221n2ZKAiBsCyxHY//k2eMKvTkVuD6qjMNOEDHdNjfqARnis1AQ0w=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.457_1598910446230_0.8465080759729093"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.458":{"name":"@wework/react-floormap","version":"2.0.1-v2.458","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.458+2308291","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"23082911ccfff49a2c31f20ce6f417cd4a53d1bd","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.458","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-aeZ1Q3EuzbwWDIPQ/v+kcFJE6jG0aElCpreu25wXZX40uZr/QkRsWygKwvKU7gTDFDhR7To4fq1JfPHdaQcLrA==","shasum":"50e3f3396b9b20af36fc257d65c1bd01fcad996c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.458.tgz","fileCount":16,"unpackedSize":277447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT5UfCRA9TVsSAnZWagAABlIP/ibahue7aSmvzJjgKl68\nimFMiTW6I2zITdNlAQ7JNlD+vWflnA1czaJaQAOOZg0eiHuwITw+L9Zi0Tmm\n6NRtI6XXgfdlAJkDzVRAQrSxrNMteOiWulfzt/2V+mS8cNFLn3TaanTUrpgG\nsXokqeUAFCqzuI/xh6FNCurNcA+PV80QpW8IkKy8IlUtHJRXjSY9Y7KYo5Jp\nRKkpviOR232rQKJzUKl9fZg9fhVEs3tkqi9sGN8rA52Mp3ThES1SICQNZvEW\nO+lxDc8TvqlTJ7NsbEE9xLXH68d5cvzcnOrRY3N8ovBmshyzjHUGIstCLtYV\n+fN2uMZIayZp/CqJX/MB+9Oox6xmP2D67tCuJEsaGk6lJqfAbZkEje+qTx/0\n8zGAaW/cIILpnQVzBoCoVHFCeCW7t+un/BEWGFBH7DgQsCk9U8TLdO1FS2Hg\n50dvjpcN1WtZ2zTUcvaoPjoN1hQRZMPsfCrslyMPMeHTc+xFMLm7gYCIcZZq\nB3OUJkOK9G9kaIwwNJG2wLD7M7T8GeyJOfS8ABXAJ6IxIioW3OtOAET/Cr5O\nQ/tNFVElc7jGeQi5q83hwzf2qB4EJ515sqfQklplE7gCg33rVK+KI/mh09HR\ngempliYBejZmbqIZpsniEfGNxCHleIyTeIDyuhFI/+kczS5s4YiP3qLWZ6ez\n6qMi\r\n=9WRy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFMDscroDcZImRL2IYhK3wAzesTXtkB7i7qKzTp1seEAiAHafFnxMkouHNllp2Dg1VaqvyTx0VPxy0GkcvoijDnJQ=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.458_1599051038596_0.8595217665394863"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.459":{"name":"@wework/react-floormap","version":"2.0.1-v2.459","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.459+215e6ea","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"215e6eaa1af0ac2e8bf0e32d3fea7a002a30bacc","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.459","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-CR5bVlGGdKPlxFmQVvZf50uCA65Nx6IwousUXmBrZ7SsUB+FEyQvDfYU/vHRE1Mv70Bn1i3cCYCv1GfAqBjsDQ==","shasum":"643e7e52da5e2bdec909cfbcccf16f7f471e1205","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.459.tgz","fileCount":16,"unpackedSize":277447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT7ttCRA9TVsSAnZWagAAtZUP/2Dm5M1RsHIyygCAwEgC\nVAEEo3pomLSa+0c1R+SN/BYNsM1oJSTndJvzmG6FaN/6kd1izohyasekUwjM\nq8dVCQGAxf6qQrW8V8GSuEcZ+jbLL9zEVU1UqOFgM0s8/msbaYH48T45eHLR\nyp5r8F3O1cP9X7WZm6RoEN+nguneO/aLZcPOiDEfU8HeeXl8GY+mcN0LETMb\nGeA6j/VY03gA8banHAv0cw1YG4herAfxW4+Mqtf5bN9I5czF4pcJrQFdmU6w\nvlqvZjYrLGa+gGl2Dk+NWRmuZKxZl8G3v2TaIZFV90r1+SL8roTgvl4MxokM\npdct6ei60dBHE06g5CgetJvYJQXcfVbq+nLdID8meYc9kGV4ZlG66Ix2qV2j\nyoq758C2mw9FK/NpSz7Z5ooRpd0683wBTw3FnqK+v3UEma5gDVaqhbKDeA3G\ndHOw0ArJGrtx55oZ0Z2ujBLPLquVYqqxhmqwjrk16AoX04Ngrxwvk7xwKvR0\ntqC0/whBQXQKHocFzmhXwrG84TCPGD8IdmTCTseF/OeBpsx/rAoiOA6pxNn0\nLtQNVAEJi3ErdAmwA7AvL/oGoRdd3hXNdnt3oqVrNZTwXSzH5UGXt+Igp+DN\n3vM/TnubWDDqAfaSqg4Te/37NQ3Q6KgH8O8ltifc+jXPlhZMN/uq0hQ3M5RE\nKawC\r\n=eo22\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgYzVu1YVQyFZ9AR7dwhHYE+Auiv5vABjhV+EcFaEFZAIhAPU+Xg0m79xG135O/vfw0An+gjtDmvzs46w28+F9cUdz"}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.459_1599060844755_0.7881438642058105"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.0.1-v2.460":{"name":"@wework/react-floormap","version":"2.0.1-v2.460","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.0.1-v2.460+a1bbaed","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"a1bbaed1aaf07bca65d97e874e0eb72cb57584d9","readme":"\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling)\n        - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces)\n        - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={(event) => {}}\n  onMouseOver={(event) => {}}\n  onMouseLeave={(event) => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n\n#### Mpa and Data Events\n\n```js\n\n<FloorMap\n  // ...\n  onDataChange={(event) => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={(e) => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling \n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: []}\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={(space) => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection \n            && this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' }}\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' }}\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n \nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application. \n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n          \n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","_id":"@wework/react-floormap@2.0.1-v2.460","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-HTHfbCsO80pDhM0pSUscXzfuPzzFv/nvkrEsq+P1eoTW98XsdMV4HUCXlm4YE9aF7qXyHG+dJn+W3ssNMTiJsg==","shasum":"9eee3711c14c6146356daadff4dbf8ec49bd7dab","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.0.1-v2.460.tgz","fileCount":16,"unpackedSize":277447,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfT9GfCRA9TVsSAnZWagAAz0wP/Rx//GFipQCon/cSyTd6\ny8tiuzydjp1AuMYPNmmmeZNd66BjIIrCJqwrSlF/L5IQKOucVlYmsBp9fyyr\nhaQPcRjM8bxR2GLmeLYhs39AlINPlskysqCKkKfQkNmZ1oHf34EDdpCv8HFg\nCWGZvH/To0flTsOkeuuYdI5rIc78puW2DeCHZE6o/LrAcp+QwYvsi4XCQqKz\nmL1B07qDYG1CJ0PvRy4K5HYGOk2mdTKz/mcVgrqfmzUC0ezlyqm8bKgDgVgL\n85rCDcB3l7SakYHiNy6q/3mQxMDHJZWl+1d5Z9uicqqXx1If1LiaTplZWvHf\nN/9/+ElIFuRwkCwmBn+TQ43/dvCiY32AV3BIMIN7ACJj/Xe2p/NfzKr/WENO\n4y7AvNZmdAmZhc04FnbooEStBY/JvGBxJZryWTd4yUMEBcWfiSnuU4VkoJwo\nFgBBvL9voBM7pgrH1BxWmZ8rQydBA24A0Z8Kc9UIzB6YiSv2G8fWP6O3Mu+P\nHSxmCPibOH/sZY6RGplB6DKbGobQZ/C/lInlWC/2WfJTCxVlpN4yOUOZKmq2\nKV1qzl4dZwrWtW5zk8q2BVjcW+xTAaLA55d8j6T/sVgqK3Rgdm+7P7Srz/8e\ngOzvL0dh/OAwKvNSRrd+KbmkQ3amjQUfGqZvTv2ea1hm90Xqod5AfY7vuKvV\ncaEC\r\n=mxZT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNwnd8IQpqphsw8jOb35kHzCXkn3Ze02N6s1xYglMfQQIhAJuEKP1iezMlbP5UfYDM5FyDM0ZCls0Tpd1GRuWvJGUS"}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.0.1-v2.460_1599066527165_0.4447052667146827"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.0":{"name":"@wework/react-floormap","version":"2.1.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.1.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"58ace0382564024ecbb4e1bf8342469a18c84448","readme":"## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling) - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces) - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMap\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={space => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection &&\n            this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' } }\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' } }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n\n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience","_id":"@wework/react-floormap@2.1.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-Nfm+3tqMusPHY62qPGnlXq3ZeSkbxKsvgwp0ONq5JrLe41oRPz0bWmV4otff/zOLKdthfPlcwvhdPIegdEFWHw==","shasum":"053edad849e07d111ad0f043303acce2146b986b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.1.0.tgz","fileCount":16,"unpackedSize":282820,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUHS8CRA9TVsSAnZWagAAj8oQAJZ1DAIT1qdNSI2YeeZM\neuIpEzfg7Fmb2ozWJhTZX0Ia9YJmRd5z8PRNcD0YpEgEMC2xNLk0qtW3s/bs\nWWNEyaqQvdb8O/ZuiEdUJTsGQqfUFUA05pAFelzBr5MttxOw/qBb0YibrSAs\njROL5zlzc1/Z8AF0iCHO1UrY3WDsoKSWfUAVhAjeo13u2RO/wlqvxvfNWP/f\nbug0d6SJO13KgglyvBOII5w6t4fUVZP5mditnZ5jKdOYEpwx/fdfgG020YYx\nEImZPu0JC9Orzlz/lCCv/YvN2QtuvjuOZQg48BcBrJnQRRuxAC8wxoOdk1rH\ngQxEsaNJjbYAKRdRO0bm4peeGh3tF/qf3Z1t0Sd1kTyiROtdy/0Qq81r88wy\nLhQ5uR1CEOIpOzQcPzjRvLBsebEECnjZ6V84uVAj1zebeRSLg4xq6CeCihCE\ntHV7cEDiSNyIdv37Rp3TdClcpNO0cLHLr1XaCm4XOTNKqy6dHqC0l1uf8zSw\nUNuHwUU+rm5NDuoGqZGa+DvjTMCnIUx6lP67ZUv2Yyisuty7ceV/+oAUU2tJ\nLG7sOh7dviRVK7V60IoZ7skipPPI+7N7P+vjnnVL1A6rybaVK2lEZfOCjKEG\n4FNjNv1TbcwbK9LLwkJSK0GNb/aQzlzY6qSswOIEdLVXoXTEgyeFyXYsInQm\nbRLu\r\n=53az\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDw3mzl9QgzMigHo7Kgfi0wtKgPFjqcbr9fnRBESwot1AIhAIQd8gJFIaPBsWvxBXfJsWmfBlFgA3Zd0ozelDtpCe+1"}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.1.0_1599108284312_0.8310781098188333"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.1":{"name":"@wework/react-floormap","version":"2.1.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.1.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"8e133b182d26a66be191fe7dd194324f50ca961a","readme":"## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  buildingId?: string\n  floorId?: string\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureSpace={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience","_id":"@wework/react-floormap@2.1.1","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-88R4hzcQ8232e8bYqYCvIbR99VLPB8pH8tcNPJeIqqG0vocS3hlf2AUbZW4gsrlUJWpiANJkQEjkFSsT5NFCyQ==","shasum":"20a8506cdae6dc0cfb472b157acc372f8b77298f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.1.1.tgz","fileCount":16,"unpackedSize":285796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV1lqCRA9TVsSAnZWagAAkjIP/R63Hp2om/+9BeZK06CB\np7FYRCZQeoRDsHS0d3Zk2EeIH5EgjtxTa0uLJdbmhmnoPGok85k3wTltAxM0\nIiVonw5UUq5kZckz18o/LvFFS+8IXchuLTg8pDXhINMeg8PAS8X8RrJxFGOV\ntFTb1FHshtys5ufyCh50HLQ3eNswEtDmrfvstAO/tY1hhcblpswSAFId4g/u\nzSSI800qiBSRHlsA9svwshJDJGIK01k6R7TAGS/NXhS9eDUfZJGZ0MS5bBDE\nj8vCFQ+Cslw+pr3sV2UyHSowOOYGoRJtzw8VsNNQeYNe3JMGYUiLHXCr2IAd\nbRAbFovGF7NsOVeQv9P3tTHKIunA4Mle5rQgr0x2y/QIqMsJmgvqqdZPrhpV\nsWnXZAmAdZT2+D/j61CYZSCp+ZoFuiOV0V+PNeYMOxSq2EBERjfIamXV/dL1\n+fUYsShFuxaPLZEnb+F8Da+P0GjOIs6UFkNrjTnChBaqGqGy9JS5WSdu9X2/\nlMl+m9O74QCKJn/erLAZI6A0wCHhgV+tuJPLYAG4Ycb1iPqoHuXJFtuNXhAl\nMAf+84/3tWtiFD+govdL4tkLkKbcolsG9sKqLTzvYs++pn6tIfVV1DClFEqk\neq1IRlXaGPdWv+sVT3n4xLc9vl9kvW1nf6oa0YaonjTigMuNA2Fv0Vy2/Hcp\n0871\r\n=SzAP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH1PIsX6BUsu1Jfwrw4QmE8TIkBdg+wiwgFNUDC4qZrgIgP/gug/gkzC5d12+vJpEE3wfpnLlprgN8+zmia7bo76o="}]},"maintainers":[{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"austinhammerwework","email":"austin.hammer@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"barakwework","email":"barak.cohen@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"phanshiwen","email":"shiwen.phan@wework.com"},{"name":"jiratki-we","email":"jirat.ki@wework.com"},{"name":"kobimww","email":"kobi.meirson@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"morganwework","email":"morgan.plant@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"djtarazona","email":"me@djtarazona.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.1.1_1599560042445_0.13763842600783582"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.2":{"name":"@wework/react-floormap","version":"2.1.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.1.2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"779b06783ff093a84ede672bb0dcd96e537f76cc","readme":"## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  buildingId?: string\n  floorId?: string\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering \n\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience","_id":"@wework/react-floormap@2.1.2","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-pShAPzu3MzFJIZsJ262fBzvO+OyjMzCgNTE+n7kzzmWeZTqkn3cxqNShOI38SL9iT2+iz2ASRSLmWDmqw7kJUg==","shasum":"65c9707b1ffbd4210a8a2959e83ece7a416df5f1","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.1.2.tgz","fileCount":16,"unpackedSize":287239,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYeFKCRA9TVsSAnZWagAAXxcP/2IdbKqHOeoTBJ2jcQiJ\n+hhzJhI9o4LbQtEYBQxoN5J4SKlhQ4qJV25t0OGAlDe4UXXbtdDlbwk0Fwk8\n1bZQgPxwpldP9gKDHja4RbumOiwOQ6lcw8KVC4yjXUAQVLHwSY2aTJFal2Hm\nzn7axOIEs7NasHL21I8ylFncaJ4SH4FFi8wb5cn+g0rplDJYNAG/MSHqKR+w\n2SyCq4OH803EXaIECfjtMak1OK2dc9MLGX/GtAYu5DiToAB6G5vTdh+f7VQ2\nbSEafoKQpU4wZC9hiJmHOM2d5gC7jkQpyRjqFOkY8uWqcnSgcBmSouZgR3Vd\n9waTE+p+D0+QksNO+yBbJVArHZ2pBltQLQ7wariPclTxnsvXhDyjdiMRnBmS\nyZZXGxUUXErCUXxWSFrO0U5zuW4WmgAp5+jNqqc3nZsEdZUIVlIGSylir672\nRC1UkIiH0cxO1LyTocUkZUsqrwvxooNiZgS6As9E/5VAf7vD/OMCu3HpGXyS\nvsHRXWy6+rbSoweKcYGJS0DvHziQ4IEnmiarTmkdTR3gOMRLnUxw+GToPYaR\nC/Rt8imZi/zK0kuuRE8rTAobw4fQCv1v3Oh9krtA4iTWQfxS0wuS21CEmFLE\nAbPQN9Bn1Jte39nbB8p/nN5OxhwK3yMc0LNmYjTrajxCh56bSfT5uFD/Ur7G\nTyI7\r\n=y84l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBi8i2JP5fh/Dw+ph+PworCwaNhLB25y1hklm5amUryZAiEAqKjiy0mIHgUGU9v3JcsSvichXrn8vaJBjIH9H0BnXI8="}]},"maintainers":[{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"austinhammerwework","email":"austin.hammer@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"barakwework","email":"barak.cohen@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"phanshiwen","email":"shiwen.phan@wework.com"},{"name":"jiratki-we","email":"jirat.ki@wework.com"},{"name":"kobimww","email":"kobi.meirson@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"morganwework","email":"morgan.plant@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"djtarazona","email":"me@djtarazona.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.1.2_1600250186196_0.03723614445586909"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.3":{"name":"@wework/react-floormap","version":"2.1.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.1.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"34eb8291443c50e3ea4c1670e083397c533d9b8b","readme":"## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  buildingId?: string\n  floorId?: string\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering \n\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"React FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience","_id":"@wework/react-floormap@2.1.3","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-tbYohX9dsoA3peMP0gn9981CULrG+6Lfx26wpJSl0W5fkyrsfz0WZUor/OkLiOQMbVavlQtjYq/gYiO+7jBA9Q==","shasum":"62aed92285cc5a64c53d113c310d479c2073924d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.1.3.tgz","fileCount":16,"unpackedSize":287400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYzDNCRA9TVsSAnZWagAA1DoP/334zQKdCHTmuPqo0XLZ\ncYgkTrQMXHT6Pydlu3MlkdSVuf4UZXDgvB4K08m8M2sSlLFwfdu4FIjqJ3iu\ntrEl2vPS3nG5h08zRppDzi52KHb2otsiP01jFovSSU/2B67/52+jUdXcmwg/\n4BjQQwErhEi4PAbBE1XFV38aXBrkh/VodeGy71qTo5/3z5tvxeZlYslKbdik\n6IrEQv1G2ERgwkJ9HGN9Fu7SJ5CCH82AByvizkRXSTJekvtzrW591/Dy3b9T\nXYLylR13AIZ/QyIAToQn5cbd8T0LnWYmua0LeD/NwuTXt4IkJH+VnUJh8cG3\nNQ0fG1TzP2ZefYzb7lhRdi5DymLVH7hr7jVgeCfK3pe/IqfQsu2uIbJaBUDb\nR3CQo5VzOmIEUpGalfXFfkUTP7rFg1HZiqaOuAL4eL5yF9ccmSX8+zeCPTMP\nKIDpbS/sgqYGmscnim1EEP6clKF8TvKlNtvMeQ1SCB+dBwNTFlDHGeFb/aoY\nRhKf4ev8GQzppw6qV+6F6RNUANFNNDGW4ae57Q8TeVKxU5sT9V+ORJHvzLtF\nb+dRaTZfbuwckx8VVSbTSpM0BRuNZvHGRz9pmmfHBBg9IK1xicOW9kmUNo3b\nZxf0Fxr2rWZ5YWCWWqqCRY/wYk/YFdjnQlwdVLcREjZHYsA7Pgn8rWhENulp\nRsUc\r\n=izIh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvWf0C/brdmAwI84lM7t35PC4ZcGa6pMgf6PMU7sUhJAiBjcYMbIveRgz71+yFCBrB7NzBrFkrmL4uehMYvuHMPSQ=="}]},"maintainers":[{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"austinhammerwework","email":"austin.hammer@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"barakwework","email":"barak.cohen@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"phanshiwen","email":"shiwen.phan@wework.com"},{"name":"jiratki-we","email":"jirat.ki@wework.com"},{"name":"kobimww","email":"kobi.meirson@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"morganwework","email":"morgan.plant@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"djtarazona","email":"me@djtarazona.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.1.3_1600336076430_0.9733062122974665"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.2.0":{"name":"@wework/react-floormap","version":"2.2.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.2.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"acfca966fcf3722dd510a95a45ecf28aaca6310b","readme":"# <<<<<<< HEAD\n\n### For the version 2, Please refer the documentation from v2 branch (https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/react-floormap)\n\n---\n\n> > > > > > > origin/master\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n    <<<<<<< HEAD\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling) - [ConfigureStyle](#configurestyle) - [example](#example-1) - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n    =======\n  - [Styling](#styling) - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces) - [example](#example-1)\n    > > > > > > > origin/master\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n<<<<<<< HEAD\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  buildingId?: string\n  floorId?: string\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n=======\n\n> > > > > > > origin/master\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<<<<<<< HEAD\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n=======\n<FloorMap\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n>>>>>>> origin/master\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n<<<<<<< HEAD\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n=======\n\n> > > > > > > origin/master\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n<<<<<<< HEAD\n\n### Advanced Styling\n\n#### ConfigureStyle\n\n=======\n\n### Advance Styling and Configure spaces\n\n> > > > > > > origin/master\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n<<<<<<< HEAD\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n=======\n        configureSpace={space => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection &&\n            this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' } }\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' } }\n>>>>>>> origin/master\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\n# <<<<<<< HEAD\n\nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application.\n\n> > > > > > > origin/master\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n<<<<<<< HEAD\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n=======\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n\n          floormap.addOverlay(...)\n>>>>>>> origin/master\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"### For the version 2, Please refer the documentation from v2 branch (https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/react-floormap)","_id":"@wework/react-floormap@2.2.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-7Ct1DWk6ZVHizlOPMFGUjMePTD1eOQiIt8Q1pTj5SZGgLizdIwvUBYAJ7vwOtEJX819R7x4nnNSTEFW6Av9L2Q==","shasum":"850ad8445dacbcea7f45008dfb951066984b37e2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.2.0.tgz","fileCount":16,"unpackedSize":289114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfab1GCRA9TVsSAnZWagAA9ZwP/izNh3YWzQ38QGdvFhHw\nKV9iE3h2MKbK/fNMpkI4GnCkYvIlZ8e1f4Zw7DCNsUoA5ao5VNYULHZjK70p\nn1tvNAVPFnDG00ALZyvjd42Uh9G2U9n9L+yrxo00yxORJJYBARB+ofCslM68\n7P9FIGC+H6v1/Xv1+j7RgzYt/0mAHUumKcTliN4ANlV5AZbGwlz8aDref5Vp\nXpGdtflHncJcljmdcwcmAnD9uXCM+ZD3r10m/BuVVqnDN9XRRiUY42MyXkDS\no6zpRaCqWPprANHQ8+YE+YoUeKV4EeYEKIE0qz9faTIR5lPgsBeUNvdNpHJV\nDbeDpWFaDUGqoDFuv+Xp7YyrWsJRVar5aAwy26jqdx9NRSu0Yz0EA9Omn4Id\nU/rnaswbjlY9t5Jv8cSCwvutqVbzKfr03QfTjzQ1x5Mx5Jq39OFaGbWW8beV\njUQZnGGDBPHIrsqZ8IOMd4ym4JrXPgcU5dEa14/fr0cl4/N1Bg/dCvc6T2FA\nS9TB4DD/tRbM7fcIcQXcpqsS09bb1bDKd7ErMzoM+dtGqubOjawx2vHj6Uhf\nLPD29Wczl0ISc0l6YtUcQfuLMmxOgd++pCDQz2+ce1w08RmPIhgSfOsttjCj\ntolOvprUvGWmT0dn2IRSnEgORWluSlRHfXXXqKNcPuprXqLNYs2GXfMc9USd\n1wmA\r\n=sdrK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkxAFDXQQaLa2Bt0I47JnhO/akYupB0eu39NHbLtL6yAIhAPLUhlmgfcc03Y6Cfse1HTtO5D1D/dQ5L2DoH7HAfeDQ"}]},"maintainers":[{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"austinhammerwework","email":"austin.hammer@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"barakwework","email":"barak.cohen@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"phanshiwen","email":"shiwen.phan@wework.com"},{"name":"jiratki-we","email":"jirat.ki@wework.com"},{"name":"kobimww","email":"kobi.meirson@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"morganwework","email":"morgan.plant@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"djtarazona","email":"me@djtarazona.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.2.0_1600765253676_0.2887318629854043"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.3.0":{"name":"@wework/react-floormap","version":"2.3.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.3.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"f741729e5fd175948b05eb23fc3d214d4d41040e","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.3.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-Rl0IvSSYlQdPGmQYQPM95o2mFSiuUBuO7j6qgmZptzbJHQBtda5s2Ey7xSsqWbhw9piIK7WVJJm65vaN2hXMvw==","shasum":"e27934689defaa3b3afd78948a32ab5b57cc7844","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.3.0.tgz","fileCount":16,"unpackedSize":295063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfazrOCRA9TVsSAnZWagAAccQP/3BzMWj/Fm9IiHyVvAoy\n1Y3hPzkX5b7+MTo5Ja3yVvuOvLN7Wmrd4fj4FYeqQ8+3NbfBIFTPuybgPWno\nst1FkwoYDrAdoL+98EYLTtnkUZHjO13ciPIqNN783zF0hF5LcLAm+yx84nPn\nb1e48zySbBX5lCVTMESD85NOxF2zNsXsJoYx5+46vCLUpd/QgfLeuENTGnRh\nUekNivkRHqndoXuS2RtNiEI0AmVqHKxgMm+wGKS/3J/rOg4yuyBL/TtpvToq\nNWsLJSRAniw4pOAXzS0K4FFeUEzb+qYpq4wYFUy5IYN9Eu4+1xGWYh0ndxIg\n+JKk7w0a1e63SrCa7WQ9idsqQExUZwzDHr7flwtWKnQm1JB6vKCov4fjgfL8\n/GdQuz4U6YozPCUfKHVtWswZbGguMVP6dTkXbxVAyugCVnyQXncqbSRNyf4z\nBBgOhgkvZfBqUjfSMfO+x9T4jaGyh4KkpZ2LOmw4z2kqTj8Ju9r3UXcVbMns\nobwflpTC8fJDKEVdx153A1NwVJFowMLlMSPl1GnyWHMSltUBXkD8y+x30QwR\nR8tqI4SXKT0U47FLfBl89bktl7vnTegc7p0o0ZX7YSXHgd/dsxe0t8sTjsjf\ncOeJJKFz7SUOehekgvl3GIFDd32dkID0BAolpIb2OA9y21QSPBTYOqZfFyfl\nO5/m\r\n=nXZp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfghQb820RXJ5lgkzkiEkt2OQKKbRwtsvf0gLBx5mzRQIgf95+HUf89QzbfbVbXj3U1Pq+y43eHBbHt5RNE4bx4DU="}]},"maintainers":[{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"austinhammerwework","email":"austin.hammer@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"barakwework","email":"barak.cohen@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"phanshiwen","email":"shiwen.phan@wework.com"},{"name":"jiratki-we","email":"jirat.ki@wework.com"},{"name":"kobimww","email":"kobi.meirson@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"morganwework","email":"morgan.plant@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"djtarazona","email":"me@djtarazona.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.3.0_1600862926138_0.9613789165975661"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.3.1":{"name":"@wework/react-floormap","version":"2.3.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.3.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"4d9f681b5a93f9b2eeea3a056b87b2d5ef138d43","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.3.1","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-Jfx73R8znsWe1gOIwn6wP4bTqqLt7CIUoAnlxyas3NxXXnNN/eB8LH8o98mCZieUNZ+wUpBPNfEOAZycMsI9RA==","shasum":"4428796b0934cac3ea5844d58413dc7a3a347cf9","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.3.1.tgz","fileCount":16,"unpackedSize":295367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa5OPCRA9TVsSAnZWagAAirkP/jv6IkmSMl4vpuaaWWDQ\n4N3ck0pA6a5mPWl4o9QhNGASNWExXJv4HUMrq/Pg6Cxzl1hUA9rWKTZLJePx\niXP7LE1VU6F5wGedk4rCBzJVIRcxwX1C72zasgxcudS9V3buuVJLo9bERxDB\nMw25TqX3GU5R5+VzsTn2LNbxe3BjR9u2qdfLMttDRQUsIHYoZNEg7wK8bJnI\ntXWkA9Yi6zusx2UvMmNI5/0BPHfSQQ/Kv7Yr8SSu8VwboYhrtpMANKbQEoWv\naqO1jTOdMojldGuhQtO7Qh7z/8nx+Tw+qnCR+RX1vsdywjdKbXB9H1i8se32\n6DM+aedPDcKMRwWn2f3TJobCiEzDHPLE/pD5JKSbuLvmuvAIbsJjEQzh5m2Y\ngeg/Uut8IMIcAgW1DonehDBrXkO/HbI8kkcvRw2aTbEjJ14q7rlpjRB2ncsU\nPKktmEwmsW2YQ9Waceh3avWYTP2raerRg+x85VAPK7Oot9UG1UcHJ8ymoMqd\nkYSdomNAFoWEI2s886agjCJJUYdX2hvz68GgtXF/9HZnP77BN7eZsTPrGleD\nz8RJRUYRTJitBb4jua5ILB5qJ+NC07Y+5FmujJzvZ0xJTKgQN/v+Kuo1WQWO\nVuJZZ70PfyYMfL4MTxRbUvyOIohg9Zg7UOUC+9NJo1MI60ZgiszoAPS6VJk+\nXLiC\r\n=61Nr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIfQnTB/civ5VpW/PnKet9oxoASJbzF0jcFvs4OxR4hAiEAtcewNnYF5LyYxiKZOn5TAUDm2FVy44Tbh18+OHCQRkE="}]},"maintainers":[{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"austinhammerwework","email":"austin.hammer@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"barakwework","email":"barak.cohen@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"phanshiwen","email":"shiwen.phan@wework.com"},{"name":"jiratki-we","email":"jirat.ki@wework.com"},{"name":"kobimww","email":"kobi.meirson@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"morganwework","email":"morgan.plant@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"djtarazona","email":"me@djtarazona.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"goliatone","email":"hello@goliatone.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.3.1_1600885646756_0.8062058918062929"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.8.8-rc.9":{"name":"@wework/react-floormap","version":"1.8.8-rc.9","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"1.12.2-rc.9+d968d60","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"d968d60c5bbcb6921720ce26c904f2979352389b","readme":"### For the version 2, Please refer the documentation from v2 branch (https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/react-floormap)\n\n---\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Styling](#styling) - [Example](#example)\n  - [Advance Styling and Configure spaces](#advance-styling-and-configure-spaces) - [example](#example-1)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMap } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMap\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMap\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMap\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  onRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)**\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onRender(event)**\n\nGet call when the map finished rendering\n\n**onError(error)**\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMap\n  // ...\n  polarAngle={0} // Vetical rotation\n  azimuthAngle={90} // Horizontal rotation\n  fitContent={{ padding: 50 }}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\n```js\n<FloorMap\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMap\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMap\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advance Styling and Configure spaces\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureSpace` props to config each space in the Map.\n\n```js\n<FloorMap\n  // ...\n  configureSpace={(space) => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        style: { color: '#f0f0ff' },\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      style: { color: '#d0d0d0' }\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureSpace` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space: Space[]?)` on FloorMap Instance\n\n###### example\n\nUse configureSpace to style space when user click\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          this.setState({ currentSelection: data })\n          this.floorMapRef.invalidate()\n        }}\n        configureSpace={space => {\n          // Has currectSelection and uuid === space.uuid\n          if (\n            this.currentSelection &&\n            this.currentSelection.uuid === space.uuid\n          ) {\n            return { style: { color: 'green' } }\n          } else {\n            // Otherwise\n            return { style: { color: '#f0f0f0' } }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureSpace` get called for every spaces, you can pass array of spaces/uuid to `configureSpace` to reload only specific spaces.\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as adding an overlay, controlling the camera - You can access to the FloormapSDK instance by calling `getInstance()` on the `ref`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        ref={this.floorMapRef}\n        onRender={(space) => {\n          const floorMap = this.floorMapRef.current.getInstance()\n\n          floormap.addOverlay(...)\n        }}\n      />\n    )\n  }\n}\n```\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMap\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"---","_id":"@wework/react-floormap@1.8.8-rc.9","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.22.1/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-7UXyQYeOIg80elvdeBuxcOSTIlbPhhQF8JQezCZyq0J/q7lhBlYt6eJ+2NlXPotwFaoj+aP5Yak5V4XZpKQZ3Q==","shasum":"d38e723ac49d183126d55b5e83a1cef450d6528c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-1.8.8-rc.9.tgz","fileCount":16,"unpackedSize":284105,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfln6QCRA9TVsSAnZWagAAaI4QAI+mUSqi/3VU5ECWCr34\nxq4AjQ3Q0SL0rPjb6Bz4QDXVZn3DfaIpSjwm/GA9PB6+HZTrRRZuxKVuKtcV\nhyCxtYWxAUQpAyPl+MapvAK7Qz/gfGe2DYFpAWEOI0LFPKj54HtMPJ5VjfMS\nAANMMIIaZryFqsiNYAdrNwIZWCcBXMCB/gGThg6vBkDxsTcnk6SLAxnYPeCR\n6jN3q1CE7A5BE0FaoMfEdOXKpW+OGWdrwvKhyq6gP6H+PBsciLWMAUNlTI2c\n4X33YaV/beMAw7YEKws2x7h8iNq4rxMnwThTru6zQDlExCNeMj+Ge0lY+EXT\nGmQsLTLNVGiTXLp7pUccEGpZXAWVNW9MFLkdjS272zQ2IJXLb5QEM9ptmoWA\naYm3Bru8ndzrQMsdQqTRC4ShsXc61ShVW1dw4v1p6eBy3rcmSzxw3HWoJjbD\nX8jjvduuo8bzRJx9JKq6W86+yEe0LOkzzId1JAjl/tMMH4bAtRQoWPUWKC2j\nflVnybcyGLbDXqqpcOIHSK7nOIMu0/xOdV4hNuyAsBEPHPGlSXCqnmqyd3jm\nlxOAoWHx5cUEJb9SgllG6PAHD98tOWQCN64mbOsN4wJqjTjtZSJG9aDJd7MO\nLGrKWKdp5lBduhCwJOfB74Z2F8ekjcHml2dCWuQHEYRqITwmUAhu7Z8ACYuY\niOXV\r\n=Ro/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXlji8Me9JtZoioBw4yXi7P/9BOGh9brtWs42Eca4ZJgIgYjcMGsm2ZY2d8YHwrlQQ9OCVyRhKVSRzKjCIVn/LJHI="}]},"maintainers":[{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_1.8.8-rc.9_1603698319762_0.6651677221231476"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.5.1-rc.5":{"name":"@wework/react-floormap","version":"2.5.1-rc.5","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">= 16.8"},"dependencies":{"@wework/floormap-sdk":"2.5.1-rc.5+f24f590","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^3.7.4"},"gitHead":"f24f5908c37f9e65f2637d539c1689ccbae6bd06","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.5.1-rc.5","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.22.1/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-va4XNDSBTK9As0pEGxkGNeTzLRBftzoaLDTKlXhYEILqv1xox1s4drNc0oFERfLYW0/3REBWDS5VC1kznDr4RA==","shasum":"ad1e0fe6067758a0614ed3dee1fa69d47cfa75cf","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.5.1-rc.5.tgz","fileCount":16,"unpackedSize":295393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs1yLCRA9TVsSAnZWagAApV8QAImENS7JYqEJlFLtBuXU\nJAICXL81G4alkVAc806lK3N5fntcfGaHQIq8riB8Uw59D52JMgYSm3gXQrBl\nZMZLkrXwInhDjx4XrH3lARUwwLVbmltiynVA46ttmygTJS/2wBO+68SQy4yO\nshnwHn5jQ0z5qhmVulCa4He3bEUNJ6U4Ljx9yHvjpPiMlA2wyIVTefKgndwP\nqA4+5pe+ZBf/lOEuNbJO13vvsRZsrwGvB+7QYo5oiy5IFCNLM1NmwCMesu/J\nYYpPVqFamltjq6fityShCB11IY3mbNfwV1BfKvvJjLxsNTT2F449Tcw3dZv3\nETYU0qF6Fe3SDGtA7k8UDzx7Gj54nTp01WrzXNlLChwV8oxt7q+XhqTjrbTu\noj/z9J1h96Ac+NvkXvmAuL9e458MnJVz0mU0HLnQaj8mzk9kYVWTlx2DyIJa\nGZ1jWl24t3Ee01BTORj6YMzm3Hy41c6pMScthPc2/5W9ahAWEB5cy0th8weC\npgzCyW19wp549tSjqD8fyKpBO3rxnMC2kfcx1YJCaMqyMPDSP2O9Yr+5lyxo\n+bgwcBwosl0tZvm9JVBFkkTIsE7QU6bSmP8dh7Wuy4Ic93M0rSmXIN0HtBhB\nmpHVeBIqBGpZR1UeDcjiOhkjYnbKqBCecU5qb1JUbGrPiNysWbGzEseq1TSY\nYZN1\r\n=BWBK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDspTT8NtGxum86EQnShU7xM6umxOvKrDbAMqqOSvHDHQIgXatAkCqVzfJ0ghjxNJAA8/9fT1UTiqxxqbe69MBjn2g="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.5.1-rc.5_1605590154549_0.7950200471239302"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.6.2-rc.0":{"name":"@wework/react-floormap","version":"2.6.2-rc.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.6.2-rc.0+c8b561c","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"c8b561c53d1fa4abd70875d5299877e816f7da59","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.6.2-rc.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (darwin)","dist":{"integrity":"sha512-vDtUk338L2cfmY1HSanqe6BS3/wpIHQuuwaG4hjS/nGYtaXkErJQuk7RjrSgd5/EriaetXwqbH7vlCmm/W3jcw==","shasum":"896181ae078ca4d1e0b0c272bf926f9098c77d4c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.6.2-rc.0.tgz","fileCount":16,"unpackedSize":295729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0bYcCRA9TVsSAnZWagAAgA8P+QDX7Pxrp/KQBiBF0D2+\nXI7j23ETPxRSx5qU7sO/aVRfbiHQHzDiaP1+aI7fk6+n295Bgp+5oaVze8b8\np0AyYeGyqWy49Ptcvzjx6ORxGyleNn6YZOBbvLieY0Ifh1mR6C5c6ao4OvCB\nvYW7zoLgS/86a4JVj+UVEAv+R7P9KvevWWAFO5DrYo0JLgoRxa8Rv1Wsneie\nPkns9+flLricUrdA/1UUBOpapTi6fyVCVc7q3iRwKMOB/HpK66xDruYhSaNR\n8ghi8p8lgAVvq65VqpA8c12jauHNl1tpPUUk9HhX85VnPyYXHo9Z0CvOjDUf\noOzVl7QQLzdnneama1s9KPZYuYUioY9QluvuG04QG/oUrbfBLhav+dsMvsPv\nlIYz7cUN6+58Eary3gy9GbMMvz6XmSZcSiCfluvYWEhaApzefiYHEY1L0XBD\nht+6RMyeaooS66pAob5ZOSKgUTHI20wVEjRvGsQut3eQKu5B/zfnNRCXQLlj\nDhn5t6OPUqEs10lM8Nw7HC58U5N9jlYkWRwy0FMuZRGARQseqbkmZHYS27XG\nAHJzhTU+tcrgxE0Cx2F3dNkyxM/w8elzwKM2mqmJWIGQQTC4vzQqY8sYZBkK\nEphcf+piTq+t319c6nVMrc5+TMZydiUBE5cXboqRqow7LtRNgRspV1KEo4GM\n0m0E\r\n=ylRj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJRGaE6EQa2Vpm6isWN3eX5MjaZ3pF2lmIvOQ6bNxyzAiBCWG7wVxB1T8tQKkUKAlWGe2RbREuSV75Oztx7f12kSg=="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.6.2-rc.0_1607579163848_0.4345126576249507"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.5.1-rc.34":{"name":"@wework/react-floormap","version":"2.5.1-rc.34","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"^2.5.1-rc.33","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"c0ed6a07f3d1f43b516873b96ed2c4264f967ab4","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.5.1-rc.34","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (darwin)","dist":{"integrity":"sha512-9KsG2VeHg7RvjEqLN0YptnPCvbn9wEPTHxDnUaMY+k8GND9Pxwz8IlH2V0Dx66TwavLmZ+PDSd5o2OCisqauGQ==","shasum":"a2b4be754214e69d3bb7ff76d2bcd6c30bff484d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.5.1-rc.34.tgz","fileCount":16,"unpackedSize":295403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCYV4CRA9TVsSAnZWagAAx6wQAJM4i2Ko1/ql0/kWTnyo\nuOZmnBJ7TPgg2rOz63G0n2DdiGbCIEOZjtyEr6sGQR3Z3T4VWduuF1je0ZKm\n5+5wyfJKOLHg6VUUY2Jp8JfWCIkoC8p1N1uNHn4oVAjJ3IR54amEpAFR8jZ/\nxgFd/MkwpXNDyZhDYK1bHbJn/1SU2izLVa00BJPO5aSyD2BGlqRQHsKH4YlJ\nyA17q12HeByD+67LWkUN5+DyJsFYHGad7jCpJDdljTNj/Dvy1ttLiS52PH26\nj3M9Uv8MdLh3mpAzqEqQPMMBLtbftF8D/k/FiidcmB6aJ0SFNKU5Em4DJerC\n3xELEPw3NnP4srMQ8cBxJwGHdc7F4rXYhl1/0UAbkdEjxxjvMD8j4WbId1s3\nze/XtWhiTbXMi6yxsD41a0dABnbfbi82rNxkcyu3gFfo6lbK7mXbWdM9SM4H\ndL/VLGFM2QIlMMS9jxTtKhPYnH098tesQbMI4jzIgao90bAF/FAPkRK1mdEM\n9fC7AcEs+54BDQjqk5ieShe95V1lOAbPeP35PIjK5ytr7SoX4o66RwgxQFeB\noeY2ZbW3sBS5Wt85XeeMMpEtQWkONBnJgquoKo77yEq4S1GTkGvj0Rmrq/E8\nhUkJYDZBdQ2qtn5K7h4kqmEfchcf2w0aM3EioPNN2YsbvB996C1qXlK0zuWM\nYH/M\r\n=E54N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5Vob5bOagDR5O7oSJbBtcPsxXM75ZR2nH28I8yiE9MwIgJg79pYJT3feqx0L53zxKnoVqtW6VfyvwYRheT8Kbc3I="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"riteshmanchanda","email":"ritesh.manchanda@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.5.1-rc.34_1611236727885_0.05622065961689904"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.5.1-rc.59":{"name":"@wework/react-floormap","version":"2.5.1-rc.59","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"^2.5.1-rc.58","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"1dafff78b180c09967b4dbdd11b12f4f412a1ac0","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.5.1-rc.59","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (darwin)","dist":{"integrity":"sha512-wPOZU4y/AqJfeuoNqyBy1fF/bKZTgw+DpyMcmShE5LJQ+TtnH7kWm427KbbRe0otV2Z7aFmI6RQziV+Qq7P+pw==","shasum":"a1bfbf0b198b2bbb26ebf68879d69e9d4fb58495","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.5.1-rc.59.tgz","fileCount":16,"unpackedSize":295403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTzltCRA9TVsSAnZWagAAHvQP/AjIHYUasUoCpm43CBsM\n0AgY5rJg4RIB48tQxCMUTplkgVXvYUkhbx8msZjXpBEiPiFk+jCykeFC8+4d\ngNmdvV/s5Akj3sSVZ/FJj18+g/qvUm4yzX9JFBqh0kB6r75K4lRPAAwctr12\nWS2amoarkWnV/cpD6w04E+JIKGIjbZjsj7/OevF/RL515aSYNwZk474GRlnb\n87JvE4Imp5eZ3wx6hmqFuYwg3EMHw23CCbsY5gTUJI0JIO6e/vt8J/RFfjkX\n/nMG+USN/xDMoUzZ77R/WI7LGHXiKaL7tCjWmV0vt5qa4xoV2x+td0VrSl0k\ng96+jcNYC430aKvtHFxPIosN7tCRJncB8wiVBH7t+x6l5CN6w/a7GoLUeYSc\nWrZyMyxsYNKbwDO0EKtde43lE9vkQ9lB7pbxvEGwRj7Nu0spBp9xIwRAMdnf\nHx+1bI0Kz3tMhyQKHrIBU15G5FQ99KKQdiUUO/Nn5Mb2lYeDROKZGbLYdiwG\n3lmDKHqmkfZxCd6EP9/0GC1DFcyVDVVsyCSp750bx67XLhE2IYWj/7LFQ5O8\nj61j9U4pukdSLcYfSvy08P76Cr6uMXGUK+hwyiclBmgAlIQsnIV65ZwFH+oh\n3jLQ/qbP1pX6nxnP9oItlQ+xEVWV41HsQ2YQIh8OvBpD0HrC5AdYkDNO0xZ/\nQ8lR\r\n=kF8p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIsvCjQX+6SDMiLdC1IbUOU8L6wUIYlw38iUVtB1iWSgIhAKhcxoORG1UArUI/tMeigu3WKhLHozMR9YPQElwwRUP1"}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"riteshmanchanda","email":"ritesh.manchanda@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.5.1-rc.59_1615804781407_0.10987701488643697"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.9.0":{"name":"@wework/react-floormap","version":"2.9.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.9.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"845fff6b5c3f12e45d9425b4eec53cd02685939c","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.9.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (darwin)","dist":{"integrity":"sha512-SIARR/5feK6ezqoojHKDQBDbFp7QsK4EUiHeh3fxvogQjQn7likNh3NCO8NfmCLXt3zjGFsvK3awPUodTFSwoA==","shasum":"a83f5ba6c1e1678da9a7c6e85f939142a2adf347","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.9.0.tgz","fileCount":16,"unpackedSize":295702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgc+/jCRA9TVsSAnZWagAAclAP/ikvLegfxOp3ZCWKuL5F\n2TeSIvVStm+LNISgtwYXkdCf+8oVRBD2q5nfXyDShkYsRFoS+Z/bb8WFIGYi\ncy/Kxqm6LR9y9KBMY0L/L7lyrIRucMwyK/2GndgKNd7JGGKoS52KYMuX5Lou\nE643m3iKyWPYa1zYu6a67WJ+NSIcd+acH3/QhexNKKZmrvlO0iInU9bvE4W5\nRimn1GNl/xy6XTRpkp/2+omBVk02zJc9KItXwNAbdzuaRc6JV9zqZ1ZmB2un\nu7v4wB4w1/r181tprJptAXQmcIbu83lohUGlJZcDq/QVjKLXwXlAZx7AHleZ\n3xmTUxPrhT+hdi6w5zDNlqGg29Bs9UkSCatHIZ57/xCEvA7upz539Ow3ipWo\n/lqoSqsenK6GZILsRhR25IUfYiUEYybO88N25V9+yj0a/Eo0un8BHb8pc8Qy\nr6KHgm0JT1TpZa1MPPjsP4082EOPYSlSPgVyXgIVF2LlCZ/XTGWWCZuVlxX1\nqKZKuvBAsPN69063goMEZ30aygjRmb5DJJ7/jHEPGedXnYxmrmLDQpgIDVvC\n+0j0WpeyXLdJWnhbHDOLT8tWUWfLSwNxMv7eBALUZQ24hb7DEjy8w1yCzR9X\n4uI29ltvzX5el2M3BR62vNJQZeER4P/k7gBhCqf/GgzJU2I6CGLvsXgr9trH\nV9mv\r\n=ek6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBgjghsIV763PiaklvujRb3WCOj2NvVb1Cr0K03tTdA3AiEAovHMibgWURq8EGwjuEHd6eXWPsHkmyLWVMHl9bdA3cQ="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"riteshmanchanda","email":"ritesh.manchanda@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.9.0_1618210786800_0.08226748743477574"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.12.0":{"name":"@wework/react-floormap","version":"2.12.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.12.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"32290b2d3e535720b061119a5a6fac4516bcd69f","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.12.0","_nodeVersion":"15.2.1","_npmVersion":"lerna/3.22.1/node@v15.2.1+x64 (darwin)","dist":{"integrity":"sha512-NRhi+cq1uDGAEkiu02MnabVesDlTicVxXqWIAK0LoD7VYLVgiXhGazHy8IiB32j+6oWAmJNX6r2ce2jsh+JOPQ==","shasum":"b2b09d10cebfe5da8ba48b962a0117c87276d489","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.12.0.tgz","fileCount":16,"unpackedSize":295867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgycaGCRA9TVsSAnZWagAAFCUQAKNuxXepSStG/r1EGoX5\nOizWuUBKi+qyKACXOfuL/8yc7gWxBzcTKvafIY5ZboBG8aHo0m0VQgUPTAFt\nhV6B/vN58NIKQNQMI0Q7hRnWrFfV4+AJ6fViziRv4iScV/i0kF/txEqklMsP\nls76UL/aXZitP1bC3+oORAyZm9uGKOtDBHu+i8Prb+26nf66hyB7rDxqgvoN\nMScClpf9PPCPEVNfZW1c1sJ2FFd8TG8HdGlwTt3cd6HD8aMCHUMfNE4Mm0UQ\nP5ZV8Pol+kCMs0iZPVz2GLd1NuYoJGXJYwcyBoVUC/W4YqtGI+cdB3k0SxJE\nSr12T9vI0HZNJ985scGwm41YGxYEaEzYc/viGc8+f3DVhZSGhR/WlMsE4723\nSwHiNFQF4MeoTpVpDctgPMBFl03mwecEa5xOAMhdU4rYOKPNadAYGMsyd77V\n/YMpIlslqHB7dtjzs/hFujfegIazFDGcL0ZPq0lstsXJFngs4EFwhPi8KV/a\nXf8yscWuY7E/ZpBShZtjFAzJyEiDJnITbtzRQYLI1YXzpcTnPb/zAJjVyRnV\nPNNtS23e93jEGRVLFgoAfUDmy7rMFQjvUGYB5W104xPEd2XrfzvB4bRYTC80\nACcTHFwlQks6B7k9AulVvJE41pvuMNkVzWq/X5YFuNws/nFcymz9wK3ErW54\nZJll\r\n=ctHa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIyETRvu/jkAUXQRAsIaZlyCJ628lfhcXB6Hl/ZHzgbgIgPo7gLyb0HKXZyu1DVuxzmdGqnLiAIylT8+SizhdrqPY="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"riteshmanchanda","email":"ritesh.manchanda@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.12.0_1623836294152_0.22460926386987534"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.12.3":{"name":"@wework/react-floormap","version":"2.12.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.12.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"a378530576305c65d852aac179328edce807f9b5","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.12.3","_nodeVersion":"15.2.1","_npmVersion":"lerna/3.22.1/node@v15.2.1+x64 (darwin)","dist":{"integrity":"sha512-SvCrTM5VVm6tDu38v0YyYSSfYcE2VFcIPfjYZ4L0fLy8Icgil1veUqVBxwWEWDltBk34EXer5hcGHHKPt53dzQ==","shasum":"c32b3e9c5a59f0ca26df7bae2caeba37fabac81e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.12.3.tgz","fileCount":16,"unpackedSize":296031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1ZRJCRA9TVsSAnZWagAAPOwP/2YUr/0tF10kAU+bmdqc\nCZhV1x4r8sPb60JdX6jqYic0o/YIBtJCVpBqtKPAl0s2/D50XMiSZbwh+dx+\nDoKXxZQuN7Bnm/uyV5XGUvP4KGSzfHU7gcqc5YyUmH9JuFaR0uF2ty5WUfgp\ntfjOSsAsJNycIkyImuqiFAXeqKg2sJ7mKeJf8pJhQXzQDp9u/XioucGxqpQ+\nLcPZmcElYdF/+GYtIxFXc8AnxI+MYvfmJ0Pg0F/gh1P1FukS6AZR1PHHvXcq\nRBEf8GODB5GHHHYO4bEAbT/a/q9Pov13CvAdXe9NTeoww63LAkMtLo6Wdf6L\noRk0yB6cMF5eY0gvTfflOg4WsvfbMLBITtwgiNB33cinFfBg98NlcVBpSW9I\nHgxcQGOZxkv0yVGU35aw6NWyiLntxgFr5CG90she1bAV7W9uWb8WUlDKbh0Z\nHC8ZelnQnvqHbcd/bxrZaJxMNqsHVAAqLaU+wZ53YfPCEu3EFktWMenbT1FO\nCxLRbPsQzwOIpW+henpadYGnjYR/CaVu2Hp9QbmoBuisq9OgybU7fac82D/E\niX0yg1+PisvdSJoHgQBcKRHof5rquIQMnIdpFwMwp4/ve60b+y/3oDJJwaWS\nfbivaE5T7RLqsy+Dyxc+gh+Twf/4ws2MEL97fGtqu4ZqQUSsuWzHa+xpdgLW\n69Bw\r\n=iIry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB/U/MPKcCV+MXBEHFMkfgufyNyp28N9O81FzZQxXUtQIgXXKwPJZv5f1Zt/+o7IuqYdZVtbBHC7Xntm6X8FoaeJU="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"riteshmanchanda","email":"ritesh.manchanda@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.12.3_1624609864751_0.036390833237137876"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.16.0":{"name":"@wework/react-floormap","version":"2.16.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.16.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"b519522b40830bc6be610d4dfb5158b9e0877498","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.16.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.22.1/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-ngjA2UuAyUQNajjUSqISu2X/N2n6zzyU10UPPeEz3xn+l+DL1eEzrQqAaTKsBZR9YnCqREI6URii06W6YrDtVg==","shasum":"17f248f2a249592cf3f53967184051bb19b39544","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.16.0.tgz","fileCount":16,"unpackedSize":296194,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPTixu1DmWEsxS8OTIUKSJ1VJGKrJ5dEye9CAH+NJjlAiEA1vv7sqNwjNH9TCOQG4uoYzJwbSBnFdPSLvOTgZqDgIs="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.16.0_1632240742440_0.5867520631249867"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.22.0":{"name":"@wework/react-floormap","version":"2.22.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.22.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"81d79bdc9c0277831c4af075a1109aa7bf651920","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.22.0","_nodeVersion":"12.17.0","_npmVersion":"lerna/3.22.1/node@v12.17.0+x64 (darwin)","dist":{"integrity":"sha512-uYg6NAcWpGA2oWr+y5GOAkc08oAEqo07lVZVcjybb/Yx+3YnW9b465yiWZrnlrk4kcH+irtlnY11BQBRvHq9PQ==","shasum":"5aee326e4f72b2432c32c38dc448c723a2471bc2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.22.0.tgz","fileCount":16,"unpackedSize":298717,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD9hoP4iW61Xa3XU/mIMmXeGLLeY7amLEVGMEdgD5xkwIhAJxgbP9qQ7WjOZ6tdRdkCedZP2k4ZBmPR773DndUWhmF"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.22.0_1636377254943_0.008962049104597414"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.25.2":{"name":"@wework/react-floormap","version":"2.25.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.25.2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"f6560f401ef7fffb7910400fe5259b6744e59f32","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.25.2","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-HSZYvEXNhOTofiJftkHVcS/JrtjvE0/Boy+jTc/4wM0XkV7AQQs1iyqUXdEzEplrv15OaX4CpDMtI0JzSEP0vA==","shasum":"bf38b9992eab03275e8fa9f4086ddd9f11d99f82","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.25.2.tgz","fileCount":16,"unpackedSize":298881,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDENZlM3VRI/3WOFUNy/DCxWqwySNDq2UFCIk2jllF1egIhAJKHdMcZPnMX+b2FOxhsq4U6iJV0CGXOFPSqnOMMpNeb"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.25.2_1636727305238_0.3874129316956303"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.25.5":{"name":"@wework/react-floormap","version":"2.25.5","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.25.5","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"2de063b964b64589fe051e05d473ac8d359ea3b3","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.25.5","_nodeVersion":"12.17.0","_npmVersion":"lerna/3.22.1/node@v12.17.0+x64 (darwin)","dist":{"integrity":"sha512-zcJaAJdvHM5dQ/KL6oaI+AnLHKmBovrWpW7Q48iMMXE0QMFtZ+AOd2NHuZ8kj0MhigPs5BL+mlQqljCQBHsBwQ==","shasum":"6fe4f0af96f1fc0d1aa04f5179d328f6fe55db11","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.25.5.tgz","fileCount":16,"unpackedSize":299045,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlyRaCRA9TVsSAnZWagAA4VsP/1616XRvEKy9M44B95UB\nyL/GiNT6BOrtGXS51irRFmtva6EeKhBX8rcxmPmvHdeqt+yIQWn8O0/CxtUj\n29W2PPhrw31xuxU4FMwGEcSvadEOk99YtG+2P6YxxDeWBqd7a+63I9yZ6ki9\neCZ1xCGL+w0rmD8XCbxNvx4UaOcqtRwmpRSiq1dDlNDDXFa8RIFWIWrPKIYe\nZTQhLxfZrPQDYTk7CZ1shZ9lM0CTS6IimfMjcBX1rCy/wyGWHUFhCwJjh4dC\n88PfH6wQRe9Lpr/PkBzmrtuSwOT8oAyXNJ/yoF1WLZgpBfYdJjjHOfv+ZOlZ\ncnvJ+wKTDpAMZOgkGq8ANZO6OclQak14Hm7AdaJjaY9n3ihfdxMmI7kOMh0G\nw/syukTomfQ4NlUr/iH2k+qAoJtlbcSHOgpMlEx1itQz5ls8XJOrvJQyQJlt\nT+K28PQm5de+yfjV3q08EE6iAmQl1/CMdbc23+2AfhKRWEarbRSpkn3iktZz\n9FXTctoLgAUp902yI4udPb+6BRTicOOHhZPCMp3mNjUD82is7Vo0S6kWMdA/\nZ+Fm8Zm7artoQB0YBBLqKnjL0sjVq4uyLq6aPmDGm0tdrsx8rUWTIbuHC2pW\nr/3zeWqFknIWtqkUn6gPSiipZZOmpAj1RBPJi6BzsZ5boNjqwQpzwwrLgHEB\n45Xa\r\n=t3mC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4ycsJfyZd+o4O9UOVStQSRzXL6wsSYUI17ND1KT5h5AiBbtXSWt/K/eduzcRJM4rjw9h6oieS6nzhKh889l651ig=="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.25.5_1637295194462_0.3103765443100026"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.26.0":{"name":"@wework/react-floormap","version":"2.26.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.26.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"9653334d68ce3fe46b261a57054930961e6ea90b","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.26.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-mDcs6bEoQ7bKdvA8mpoRmYqlG/ftK0sjnslF+n/jWgtrI12CBI/+/ZtNdU2gGX1gzUEFK1Hx7YnSpctVj6S43A==","shasum":"f0ba68fb1030a9c2998bf314a03983a04e5532ec","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.26.0.tgz","fileCount":16,"unpackedSize":299208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhngEnCRA9TVsSAnZWagAAJk8P/32VYnxs3x3uBj4Ri5BD\nIqJlVO0XFiOggc9pvvxFz/HCCF6NCFRmQYUgwdO6FYG7VArd3hMjvLA2Nogh\nYgnLxkMJyEG2mzroDLrWrjZyOTdbnjri8fqVfR5YMKaDFR8A+g9Sp37zpgw5\nSnDdPh6shMzaVVrqqq3yF6PdSE1cS7a2kTHPCqLFDGEmP5YwIhw1G7Ww31wa\n5nc1eDciKWxeFtdW9eQciZi683zNG+Xlxjk17GZM5rn+yCYxnK8a6WoU7Tl4\naHW7lEpzmPsdfupo5FUCMJ/Ud/ZV5vDVPlGFQIaGGz2TxJ90DDIRIZp1hra7\nFIh2cNNmSvKdBokUvG/Pc8lQjIdgNlrfU/YZJMvjrExgblCKc5LkxSUnSo6g\nW2tupcnO5orY75m1gurvR9QpQFtetpYiFRPzCWxOd5f/WAQetpxIXAAZkXpw\nhM5uZIM+6wZK8C32yWLwi+kN6wn5Q72/f+tdXVL/BfPzXfu/vxLbEOqavNnk\np5iq3O8OSmcAgG/wLsrz8OVQBBqIW5+a2uYoTWhkHQXb+fKwD7ectJ/HNd0x\n6jw+Yh60gKYCIPsEuvI93YadtmPqn80aRB5AQ76uKmugTzUrwQ96WhxdRmMk\nMst3MNiXIuuwHq2RHOCfSQZGy0pv/Ig+E/LqDQkKgnqJQl7b8I4bn9ToAV8F\nwZe0\r\n=2W2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyiAxcowga5DsBLvG8fo7TROMQmqZyn2jsVw/gc3ZmTgIhAIqnhAgVBSKH1g2dKzP+GXWRffXYnXAjJZiEj1LWiuDb"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.26.0_1637744935353_0.4004882375716119"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.27.0":{"name":"@wework/react-floormap","version":"2.27.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.27.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"03c93509adb255f02b093227e2de3f1ff8a4a0aa","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.27.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-7ZzU8Xagk6OwbIfEWFxRK/SALZk3daJSUv6YdVRwG//+njQYLH77DcLU5EsshncXL07/sV3eLAdGUNbnY5dDiQ==","shasum":"5f5a320dfc22e55ce8ab83c6c12974acb2b2dd9b","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.27.0.tgz","fileCount":16,"unpackedSize":292214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpczYCRA9TVsSAnZWagAAPTIP/2GascvLrDkNVwEZ6WRf\nvXd3FNzndnlqejElYNRDOo/2IqYsyOIryskVq01ruh5zewvhV9I1f0Olbx38\nCDsYoPY5d+ncmiZzlWgcPGdFP/4xjInyUSeOjIs3RNEIT4Wq6trHiRAA0KQ0\nhOEZbDjxAatjLyItu2mIMHqGX4+1QcCt2YeuW3tWVq+m2oey8C6n+1VOEast\ntJZ7WYKVEeHVAIm9dNjmACBL4Qxrrzx88cEYpe3tKXl8L6bhpTv4iSYKN/Iw\n1uzd+alTQjF1ExdMliLofGNOzD4bqnok9XlCYIzZ84hCFh2PrLNNgQfblwWW\nL9PqTzRtmY0ypl3z9JnLhxKyopZ4y/mYrQ3a6ikE/AdAaZhRObUcwo2AzuOh\nUQrPbq44/t12Rp94Jch9yCAuaAVDM8bACJD9OwP2oxt7LCCrqeQEbTjf5nK3\nexT0dtMSRE1nkuwE+OTcpTSTuLOpdKRjDZklRHy1vWINM9yB8GAvDSgYYOpk\nkL7/Plw+Tpp3g0NcXJFGUORZRBRHhZy1Wigi+RgA5a2vboJBLdJQ8K6W6n/2\n4UFScgHOh2Zs4AdRW1xEVvQFo1+b6nmTi8NnW5BtM5GroeZMmuGrQ3JIzu7F\nglr/ciEcGJBrGcyZ23neIABEuFd9dTsmj+QuUCtdbELZgJ4w+GiUQP7jXnhs\nSDg8\r\n=SK4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ+JU9xoAw2w6fsj6ugHW6mk2j35/xQqm5IbYb15r1GAIhAM3EnXlSGDZbajvFcTzGmgK9AwhlK48u7HVeuQtpZHAh"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.27.0_1638255832037_0.9879550059337063"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.28.0":{"name":"@wework/react-floormap","version":"2.28.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.28.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"ade8663f05c6c863b3ffbcf3f238be030e0e4a49","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.28.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-lg51PyGJ/7RFF1lXoybiObPumrqqlRSloe5K95Dv0H+lZiLrMnarXQ8ug8gZ3bWF1fhtsXtfVh8gnbNUB4yAUQ==","shasum":"ad6dd8314659384a49b140b435d759968bf9d98c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.28.0.tgz","fileCount":16,"unpackedSize":292377,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqObaCRA9TVsSAnZWagAAXbcQAJ/W8NPvLqtJniQzscuB\n4rkfmAZhCxa6h7yjtZPH61mzpei8vh2E1RmiN+JjqZm/ukrYpt7xv5vHztPW\nUo3XzPySjs/Ojs/IhBsxC166LT56VFn+gHVfGKbA/XrBoTsZrwfspUrtW8j6\ndsG9GgfkztlWnFqSWFXl61KoOHJK7LVe+sAEb9kJlOs+TZg9IyGyi570L7SB\nHk+9SCHtoFcbRmKgN8gfY+8XgnOb69DOXuBYHOCluFgaObyowN+IIaiRMxCs\nORpwRgtpip18vP3boUnFU3fF1W3cEw6iFXPcJmQQ74ayVvB7PR/ci74QXjh6\nmr7TvPHynEa5JbUiFbREZ2zKcqvdvz4iyNTMwQ3+QWYJA57RVVq8e0li+eDc\nkj25lFWQoFHd66dfjFa00ECvYw9GlpW1YKqbCI3V2yUi8IlnIF8pPjn8NQK/\ndG/ftLmV6C2Ic5s+XDVj+2FEDt0e2zPILdL/kGLizvuu5jsSLdwX6STJeNq6\nIBeh2laB2lOrR0azrQg1nZ4szrkY1ODUIi+nbm5XLZuIPqsDgBu+3drzNK7b\n4jy5rKorQvmWkHN/tWUblBaaeCYLaYMAHByAioEId9GxgKVa02XpYLc5VYWA\n4JZsPtrqKqun5aZP1ZoA3KoU67p4pIp8V6ejTyb7sZ3OuwNAgBFB2YElwiop\nbFvV\r\n=gpXV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZZWtDf2YMxIvxvpFasnXy8w2cAxxumHW6oB1WwtkkdAiEArCxF4l/I1XMxDjVL/5sEso4+67rbx/NoiEpyvbmCGKQ="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.28.0_1638459098533_0.371613976191536"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.1-rc.2":{"name":"@wework/react-floormap","version":"2.30.1-rc.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.1-rc.2+be83182","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"be83182cafe8c69e35c2d8cb49286c3cd6e635d8","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.1-rc.2","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-pzwx/eJA4ImFhn6YSnxJk7zRugecMi3CQ50xTBrpzJ+aLh639VkWiGgmzLMCprLc04KJ4hdWS+RC84G2PWhsMA==","shasum":"c170ce37a1847b3b4d1790c8b15aac3ee9004a20","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.1-rc.2.tgz","fileCount":16,"unpackedSize":292403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ki6CRA9TVsSAnZWagAAeXwP/juEcB+6sCLJMXeHZoaP\nSS+aYz9pOJq5X86qjwspFWlHFnXPFlsNsg/yvGA3W5ct4t8j8B0AE09eEc5G\n6e0vMj4oEZOySg83xzIFK6pfxm6QoSHz+aoVGqW8570RvFzjH0yzywjpaoTp\nYzcMLLISDeZfp3XDXsWlzJbZnevMpvd9/rjLqP7NqWU9nYYM+wgkwM3N1zaY\n9e6ugR6YUNbYihOMMwkDYryFl/19J2iA01NGM+pb0+nqVX7Hgi3u3n106aJA\nQe0WIZT5Z+dKlBUw9ZM1uaiVmFceDXB0dMUb3VmalTlsAblYkEjJVdoMohZy\ndVMurPDTkwXUyvhTiDxmaZv2AClorPgDxyMZ7G1gx9tzaSD/ajapLiY8hIZd\np79nWDOdMoelqDsCh41/DIk6Q6ND7S3WflfdvId6gsYJDwP7rkK/N/lsLbgE\n53rmpFTUdKJqet1F6KApYgb3yCPJ8lzmMSXk2EaT8DNnG2kLcwsT7SOr+KHu\nRmnh924pw1XAIbl1Arq/COJYuiJAoD9NT8KyM3ieBvLMVK/9ZEXTKTulJ/PU\nojNi5IZADm+Aw5Thv8MMj1akc8LUaQkt5lL1bAXJwjiVQsWp3B3oDjKa7q3Q\nXtR6oBevYKVUHw4oS6py+EQctPl9xm2Uqq8o9kSBGkwen9KmqIt4PduiQEC8\ncYG1\r\n=xgvE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIS/+T59u5Ycw9Gu+IhUNu8CWHe2oJHMlp5iJCOOaICAiEAnWAhJ7RYKqvFuKQwaUi6aUmRau9TKkv8e4y0dIvMOAo="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.1-rc.2_1641957562775_0.3635298645058216"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.1":{"name":"@wework/react-floormap","version":"2.30.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"21f2822b72d1d87de93377bb6051dc9d1f8de532","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.1","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-sZFhA3WBFM184+99kt/vkaBSKTYxtTWL40d+vCSDrFl6jjchWFjME2gPo88ximGymc0VSfao/i1+Jznf7pHx2g==","shasum":"9df104d078bca2b64414cda23dde22b44ef7ac14","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.1.tgz","fileCount":16,"unpackedSize":292541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3lE4CRA9TVsSAnZWagAAGSgP/RZuhxsnFQfcnCS2D8ey\nzVzza0HndVggo7j41DDZwhXUpp17h8naoTHjRmrTNiQT4g7/xFzG7R+boLR/\nrH+CitnKa2b24ocbcqdcj6Ft5crxvdynxFzZ6zIZt3wM270REmI3blP+Ioo8\n+/ufO62jH2B/0apRvD8E6rznriKWWDMDopIQzXxdcB3WComvMgJ6A0UgVbK3\nLFof5R+mkFP8TydgYBA8+pTA8hcQgBA7LCkE8i6g/e9IHDUHytBCWWhxjD5u\nr2DC389F1Xk9UTOcjpH9r0/M+6xfdF6EVL1Z5NmHHziQu+DAD5Ta905/XzKJ\nGq7WxgZt2CNfux0w0AkOL2u0e+JXF5y12D0fLS6sjs4IaQ4RQKlsFscZnH5t\nmNCU+T3x2/3/CmN2CXMItiHDIArACObmcCNJLp3wvnrb+pgSAdc69EqFC5+F\nZcIbnGsR5XZZwP86FRFmG7oddWKqorKFF4/WyPZfXJ/pneM2kCb7DjXYqFbV\nLiY1lOzM9XMIZHA29AE6wcqrTaFc0/0zMLGfSum791KPwsPW9HYk7lfYwGy4\nWHIONVHYchGPszMfaZkq6HDB+6KQiIxRTAAJr/zczrW9jpUWQW2AnBJjQUih\nJt9qlOMgM7c7eHFfvpHpzRMvBVDNJEfJeFpJynqPzVJqvVUozGFljXPQV8JV\n5avv\r\n=SXfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9NP/lnxia/u1vIOIFYMYx9aiYrUCzOOTHayv02rQ1XAIgSkJ4aWWhgEjJfrz4BuawUaSj0halZxlPjgvDkmBOj18="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.1_1641959736233_0.13938968909127158"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.2":{"name":"@wework/react-floormap","version":"2.30.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"47822d9a9f8f7dfc500697f5b36a3fa6fcc51744","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.2","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-N6KIy3hehj/27XdH6IdX6sIsefjtXhl2tCSNdlpmKzbOnNRMNFE0Bd9sZHAQdGBCaQjaJkSfGUrX+5TpiTEICw==","shasum":"927bd0785c48f5f8e3c9a357fbfc9113c0e1768c","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.2.tgz","fileCount":16,"unpackedSize":292708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3oW7CRA9TVsSAnZWagAAjfEP/13L8MTLy8+JouoWfOFx\n+4VJ6UDagdLuyuwEiHQ8bpSN+/Kz95QQKW9DU1kPXxNARjUHpC5PnI+AoJg+\nfXrkno+vPNY5vawmq6fMG5FnAmPns2TMMK099Mg/rFg2K7/C9VCumb/PEQ42\nWKz/hsd5zvFjjraw+FpLMoZvhmV7VujyO6J6hxPJzALcjBSgXFLb+oVZtnJh\nWFarsH69K+jsJuL8gx3cXIUdC0pt7J5kwZqV8WCZavrl5q9QSOLQLJYnDpn+\noeZ6pDSZRW9RiNQEA67Q+Zlx2HrU2z0QUudHPMIqLgChTec78qNVLjxSMGK7\nkoyGjv0oms7LYWGtlx3jfqeOPouIWGZIHmIbIF+S6uzqKtSqYcQo1j5K+EAe\njvfTxPeGMEc0E8iiD6gJE39gqisOQotRr3uyfl09T0D/9TRcFwzf0+lixDlE\nIL1MymfcaeO46zEiJiM35zljE+a8OwSYpRmcB9cHGiAwU6GgJmtMOOhwzXQr\nAEij67Za8YmVCr6zyGlbYs6eBvZSfB5d3sJFXFU0BDMcfSQVQEPXTX07RyTN\n353BLap1sz9H4xlxTumihcYnoEcXR1IPxgkWPeuv5JuGfKcj9bZSRZkHJhbB\nb1ip3VySDA0nZVJTFk+c0vhq1aHbtS7d6bqMdny24vOgo+FF83G2mOGEQCm5\n1TeL\r\n=hM/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYhFrCaUpC40FoV66Oyo5y/jwpFlCCs/l9UwVungxmxgIgIfgel3npgAwTL0e41zMwoI3fzNyBzycYGbdQTLDuHHc="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.2_1641973178843_0.10667493148789542"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.5":{"name":"@wework/react-floormap","version":"2.30.5","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.5","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"c1626582249ecd8ce61588652e3b4114c881d322","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.5","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-Moe9qYnHVwp5T6wy172suTjeIdHnZxxc3BkrthbyIHnHVSdeQRyo07MY9t8hQts9oWxYH4F5W39yJHGNaZ+o8Q==","shasum":"cddc4dac348421633a6d12e35325fbea49567d8a","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.5.tgz","fileCount":16,"unpackedSize":293258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6TivCRA9TVsSAnZWagAAPJ4P/AndYOXSz1PiXZ9nK3zP\nhKUEwbtfDxzJVI5IYIr/rTh//Yuf7UN05D6ImR3iOOBMLJUKJvTxKDiBPZFC\nplC8B3+ArWhO8fNTlq0SLQ2DD8TSVhXMQf8Nfat38L78wbJxOG82nJw+B6BW\nqyGeEWnm1zPNt95BWncJBuQWmTkww9sF8W9DrjHTKYf5ru9M9LvCarzNUCVM\nW+Vn9fXjQFE9WpP4OAWJy3LqXuTzrSIC/Zabj/ibTkUfD1SECOj9its7bjvf\n3F+mQQWHsbkBVKhaMZgYoYYqQ6/Tf+qAUvol2GFurWUHIhffuhCj8NojK6rX\nxibgFmOIwFJA+3Ko1Br7L159tccPlKaos3KRPf8cVVd5Rh+P4PSmi5A4ir76\ngjw230zyqTYXQfct9wTPnW0hTNxoe2olAPy8N3OJiJYUpNN8ycR5jIGUM/Xn\n23E7aMNcl5ItgDXbziECzIodp8fVjLLOIFcJOdmwj9GQTOixDzgsAKIZn3lb\nILl7ZhfYhdx20ErWTvolMfoRkVmChwrIueKzZcammaIHR7YVPWHEh5c3RVbG\ntY3DpezWUa6K6YYxb1XZzBABH4dPgSV50BH09oa7bW4APsKm4cd2OnXDkK31\nouQAbY88xQl7j3Tncd6eCVBLY2lvl/wDn1nXD3YYvBMxi8cN/i8NMJav/fcE\nlPZG\r\n=BIxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHQRh8wqwIqVZuFsIMwChI7Io06hodIhvn48MUeGYchgIgbUbJGEvx5eEPnZxZ6/5K2wm+hfGcEmg0+KJhhJ8BHcw="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.5_1642674351667_0.34996677984530233"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.6":{"name":"@wework/react-floormap","version":"2.30.6","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.6","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"fe7c1a2a2cb5e307e08dcb8a991d92b1e382600f","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.6","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-3MmJOO7WYDISGmwe0+a+ngFGNfxMH1L5dV8ka74FvwoF6mhUF70vZsfHJAjc2B0ZwfIVFTe5GdQCnTeO9oAEBw==","shasum":"8da1213118a98c2fe4d58d0358c011fa79a67ca4","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.6.tgz","fileCount":16,"unpackedSize":293422,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh74VQCRA9TVsSAnZWagAARhoQAIz6/KcdnG7fMU+FfoBR\nOPh0HGyzQWIm+SaPagAZ07EsePUcCYLc3fqD5ObXwuzAjWK+kbV24bqOMAks\ndPzsJqa8P02n22lg1faqJUj5SjSmZcv/V82NnjBNxEa+Rv0YTuKxjbuYI2zU\nY5welaPa8jnkZbw+G5muCNv3dv+nGUz2OFPtW7Wj+BmOJLt5YkSzjLq3sI2d\nOp69nXc1E3qosHEi3RskJA/j8C66WzhSJCvmIwk9O2xYxNjV0rWiIX3Ct9P6\nm3jcgYr3yNkAE49AceZdAoPMRBqOoVxzRVLvhWVnAzs+4K72Msj+vxsQYUMo\nku1E4orJr3lARBG0q1qLZJ7a8tmWxVt3NtKFGcuQl9+p1nZeSzt1JKk1m0H/\nDMdOSxfUbpCVmyLo3sW6IXgQPCiHA7tM7jx0+Dm6/A+yHK0z6PHUkTg4w9kx\nO1GP/ZOTmsJQlId+ZNwzJ4HwIb0y9uoyw8+zBUnFLxDT3l0GfDJ+JcWTSik8\niV0FDhY5+APd/GdlzRV8UdxNBy7WLACuc3C+ZHJVdEw08Pc7d+SoUkFbNdxr\nctrdddBxXAlAHkcfEn4Wlh0+qZiUnd9FXypt8cR1LKJDclBj6GxqTsBtuujj\ng/l2b4Rj5JVdraBHYXhDQL5zcSSG2FwrbhLl+LhLbHcvbzl44HKi/8DlBDln\nFYzV\r\n=1cSn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF0NGvqiiOcFsWq0d7EApXH4HiarOFFuX58zRdLm5Q3+AiEAlcKCvArbO8d0aMPTaL9x72CP4iySCMDJVSXw9tFSysg="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.6_1643087184422_0.8754326921058591"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.10":{"name":"@wework/react-floormap","version":"2.30.10","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.10","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"de945584a14124e66e99202c1a18d55dcefdb4f9","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.10","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-klCWJsRpTmXIpGr1G5DCG38+bv2LyF71Nbi8MEtw4O/iLwnhdNsgsw+X1TZP/dZrdbon8sweTMl+HUhzQNzX6Q==","shasum":"d82c037cdfdc163c8152e4c42c54b26aebc47e55","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.10.tgz","fileCount":16,"unpackedSize":293590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9A/QCRA9TVsSAnZWagAAuz4P/10JZEOLNlZnuUgHJG7l\nQ+oF01z1noN3t5/F4aX1oh++2J33LWq0beyY4/TC8KmthBfEjjmKEVG9eQmK\nENdjg0nzPD/8id4ByfiIlQFphuwiiT9fnpKn2MW/SIBfgNgumRBlnD0tO0kr\n4ckGHKPELODZHzTd9zjdH23GVPjLFyf7lp+GM7v2XXUk9GFPz1s6Idam2Wv4\nnTERVaOPeKqooxHUiVWplQXROpdRbQHF9mslha9/pBLnXqiJLOTeuAcssuWK\niXs83lBUwl4QKLl3QGg1QHdKIX8ioP4+bQWmhdEx9bq6GSwc3oaxaIu58MIA\n72/ghFA7tbyyt7QMP2Pu4ps41p2qq/3x2bB2jJ86pBQX7VDBF0RW7gNwJYxc\nhs21HgyRv8FR1ro48U5NDB5M7RAfSG7fiNM1MXP9uesTRN/mZXA2IV3kP8S7\nq2B5MvMuZAd83SqtxOG+4F1v5CrMJuWuI4A/7aSaXlPsS9AwtibkGRtyQMwR\nAJN3dqZQiHhqnTD6oNMHzYxW8tZUwkpeXxfmpBUgK/auaDY0X2potT01Y3ee\nkQ240hrGadYNq3aY/OhjKelVnAtshpviRyNL3wjE6UUvOSFnDXPtE2QzNOcG\nmITDO+tNbL7MjbOtHOXAdeqG6G5vbniEFMWCAorDBaitucpwxr+32/LqQcFi\nh1r2\r\n=tINQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERCXXnd4s0Tqzg3ZudUefW79GQgnADP7uSnJigH6fP0AiEA7vH1wHRUyDlkq5d3D1VmF1+3n+p6Af+7er9LaUZ7+oM="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.10_1643384783804_0.4134911735006972"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.30.11":{"name":"@wework/react-floormap","version":"2.30.11","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"2.30.11","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"0ca088da03c02f5053c7214e6cc2377527d439f4","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@2.30.11","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-S8Km6uGCwpv/NaChtr3TMsO8INPRzyC43ZC0OLaglK3cLXUfPMzKxbn4arl6zqR7ZgyPemCsob8ae0sdmeZH1g==","shasum":"134deaece41b02c6fd2b2a3018727e24fd9c08d0","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-2.30.11.tgz","fileCount":16,"unpackedSize":293757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/OwMCRA9TVsSAnZWagAAfykP/RLOWygcrpthaqc8NlDE\npeZNR72Oanr2OCAf5jH/IfEWv0K/qK1HW5HHgMm5z11gRfVjWtdSv4+1U20M\n7qovnstTXR4ytRbOgIFOBjmRNdTfDOTTvFBhbn02vkVlVUeHditAq7I8ZLlA\nePwGlUDYRxGVSHDCaCrsGNLjGeGholmrr8dWdMSQknZ58yzO1V7sfD6E77ws\nco7VdJuHGjECZgADrisBQUCvzNdLc6IV9VHfVKxHcGxNRJu79Y0Oaz5QsKyR\nPyR6O0uNsJS5wrdmnK6NwSPZtQ2KdAvY6FGKXK0/WJWouwEg3c8sQfITIBkg\nyMhxVymSyD83q8ZHsQi6eGZ0+U1fzflH0i4QQZJxcN0N2ThdZ8qBf/KM/VJF\nfTtH19vTQ3RGGwQveyKdtYR7+6O/FAAxOoyXUPJ7NgNo59biIv758p3aGrc2\nTTdBen4yEn4GlqJSbzkSx7oVmepEXcWGosnE9D29G87dnY/HUOngaS4F06S4\ni8oBMRK+YTds+5qfkL6gyMT2ed05I5B/PcT5NeoX64IgI0bLXxOZvNZnmNMl\ncUlMofkP52SJ/LTAVLKKDGGXHdhWwn5j/bSCzqljFGSM4V3Y0KnhN0XjL5ER\nQNwfSpKV+UmFuLIASYAMjy4WQ54vufcGBZMafVYNrlVLUnQg05difnG8EXuz\n+rGF\r\n=7pru\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLmgsUa4bRjGAUIaNKLJYhlxFjUSQhPEG3dKW/E2zrmAiEAk+qeEFlumB+UJKbSNee5IwAcGfNwrHAVDbCbcp8oefI="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_2.30.11_1643965452014_0.5292260469208465"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.0.0":{"name":"@wework/react-floormap","version":"3.0.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.0.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"3fcf2ae412662eadd5b88e8786656a16eb3fd001","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.0.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-PEKYP89ppgBmnwwywrk89fp6gEW3UTlLNfSddfRbyYqtIcVLQvYdajVbvP/iAp7kKM5guIrlGBmgzZ7okG793A==","shasum":"0fbf84b26672ae49231af1e2f98acbd48aefdb39","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.0.0.tgz","fileCount":16,"unpackedSize":293915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA5ZMCRA9TVsSAnZWagAA4HMP/1tTX4usbRoFP4+pqvcG\ndFRuHEnhJvFnLhgdIY/NRLUv3heMQ/8tX46vvQfaVpYa8acGO3f+7m9+Fbb9\nWnAktgSeji6xaUSBFzodp+pobDSpM0gkBl/RDxZS6jO6UxvKKZeDF1LQjza6\nYJY6lCdpU7k3wv9viE9aZS+ekiuYoxQUaJhPrEP996vGYF1Ie1ED5KM1XIS7\npyXLtWZeof4hrZne9Q1U6nIwg7JhDwfIiCD8WEFwBWbREc2wexrtqpIZeXCQ\nOIht2OzTjtwno8uxwcshSCtTAffT41aNQMdNQjl7b7KDafbZLzKTbs/gXNzQ\nyw4qeX01rgl6W18OUuIfpQrsedCT6xn6HBF08j4FLIqgAVhtcf9UTwnBvA99\n1C6BDnIduXaE2MXTJAlWT1TlGFayAn+KrDQBDcL8UD6czAxg6c6mWlPClq15\n4u4k8+CHDNhd3DKCUz1uOEg2dQmLYeD3B6twzxXkbZDRLdoEmNU4LFO+7iPC\nekTe830/zSpSm1mCYBkvkQhcUrajhM1DK/93Zy9v+Xq7JjUofWqc1tPS0RJh\nIeLGnh4q8bLNCN3MNUMkezJ8Q/J0Y7Gfzzen1Bi0FjecjC9Uuukk971N6d4f\nWRkgumfjdDXbWBvS8xRjvPc0qkUQ+gHjtNUrr64SgW9Trdv8cYSIFTK11eQX\n62ik\r\n=gT/q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCC1dxq2BoJusWm88mA3bTEy2JGCOkXi1O8LyYiC/1WAiEA6lApLn1VNCJeMUPGNIAPq3qYtwCGRCAUpZpFoxHzB+g="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.0.0_1644402251891_0.028167635683917558"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.0.1":{"name":"@wework/react-floormap","version":"3.0.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.0.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"b2c39909f2e93c92857501754ada6183d41282c1","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.0.1","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-nyxWC9yM32KHXV9Fn83PAaE0vL9NbmG4BiCr3QRD1SqaFh68G2zMREguStiUFbffpmK0MVGKfs9fDZ4hp3YFQA==","shasum":"23530f6c4dd3890bcc3212ed5a0ae9a15d5500e8","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.0.1.tgz","fileCount":16,"unpackedSize":294076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBiqSCRA9TVsSAnZWagAAMmoP/RwYb35ur7i1dCmztcOY\nvQad8O5AFV6PCcscKx6qBs4nlyj0LflQgQjnBaHBO/MgJdjIHsIWtW4TWl0g\nvgZ91sjEvrLkMrvxkdwMISc37tkj5L1lcbKuoe7vXUNru225b7+byVJjVKpQ\nLHSi2cDnDPy2TQu1kh780We10NJk0TlJq41AR/ZvM8sXHwu72rikA30bAsuL\n4XVdUEs3U/0Dfnl2JAJJd4M/WJlCgXXPiwsicnoqcjHiD9LBsSuG1iUOpxFW\n2zEyHqBFuirUpA9Um+CqtxQNiO4qnZUvxyRcsXWtYdhgSFTgmypBu16t656X\nnDRtrWJJnYcHbc7XhhBCdfwELFjwqbhNg5veIqwDCDvvHwoxA5L0ADmwAKE7\n/XREmord+LVhuZvaT87zMwc6MuXpRHhSsSdoqdqyNW8aMIb6b65Tnc8ZeqF+\nHwcKXBOKUta44OHPcw7ac+zs90He3QIrsVYuGWW9ZB93El75FlMNLs7RTarm\nf8P/29iVF+sRrtjg82BW75hIonEvaZn4/eCiJTrAjiLmhjBeftkXz0Zmo4fV\nw00Lf6terzc4oz9HzLjB3I2hb6Zpf0ooZDcYTCFt+XhIeM4ztxS6njr/nnCK\nRTCmtRbjUDaBwOPdReOAgJo3YOBekKDK6jJ1Ru6rYbPb4mW15JFsOFxswh4C\nIjdk\r\n=+RJr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+OdiiwrY+etDidpIzCYDC7UdehmhP2CBMYRHXAiCYvwIhAIWLPPBMw1E0lxtsCmeE8NopaGuBapn8SB0q/VM63XMX"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.0.1_1644571281984_0.43356384578610707"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.1.0":{"name":"@wework/react-floormap","version":"3.1.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.1.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"8fd51e9845ce0d00e623f26aedae404b2df111c4","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.1.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-pjcqxD571w7nmpnZV2RAGXfFqaXqI4SEkrHkD77lJrGW51wFwaLRdcvxHF8Mqx4xoJPtT2yz6aQx3UwNmyuv0Q==","shasum":"7cc5c90d5e943e16dfbd0a32ca2bae73c8ddfe84","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.1.0.tgz","fileCount":16,"unpackedSize":294236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCiVZCRA9TVsSAnZWagAAgroP/0AJbRXSdYzjUQ55kce5\nqIx6YKFmAgrInqaAZF9ZjmsW+93Gj6+JxVz/09NQJmdm+D5aBP6OBmfliz/S\naLi6XdG0G+NOJ4ZVtY/RVTyODhzlJ4qa5NMYDBLdSuKkoPuJZV6oNionVpFt\nwI5tMzXAT3vtEr6/KBzquCT56wRdTo7Y7nN62s8Agf0pkaX7Gv3rhx7ZfEOO\nY3sm3H2AKMPLCzRIsP9YH8/uOdvGQ+t4o303NibQ03BAS1qMGmKH5CBI2shN\nN0xg3DJcFNqYgxzb46KCazYjfFzrFBZt65sz3UQOvUC/DphNBq508jD9nFp/\nK82YdavLnqrzoW/RBYY+pESDckdUcYHwYGcT+yzcBXbI8WU6EGtL1wEc7Z0D\nStLhjlT8wNRoy2gH88kMVRNjlWBI03zVESQ75jgh+Ek7p5ApkSxUYypMlNoR\nCjywhEfnVch4Y5RTjEHZOMm+NEQW8VQw7OrL7QIzDMOGWjqYWB2ScEu1myDu\nDLlrik3LwFyd0xzylZTasTGCZ1Kg+Vg8JuWIjFlxr2Mcsluy0bKeSoBGnitj\nyx0GDT5CvjsHxqEIfzeQYoV2l7NSnby3cs+WxTJHctjPKEgGnoyTSlfsHobj\n7dHTpwvgpUQ+1+5dDSty1KzhCixsL0Ixe9gDfY8/vkk32ITUuXosSUD/xUIb\nY7bB\r\n=jKSV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZnwQCuYQ6JvMzwx0nU8J0TO2w+4vroMOaQMH/rtkwzAiEAjZAgdLihOWvLvZow7Gzdp87/9S+QXk1L9uqPgrupVfY="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.1.0_1644832089143_0.9313136046381889"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.1.1":{"name":"@wework/react-floormap","version":"3.1.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.1.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"6344d9f1019c372dfce6f07253cdea7d715ede74","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.1.1","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-/vPIcDUtClkjC9pfMUThtpKIotxScmC41GSPnDshkA4myGC9jEX2GBdIdRD+/DxjmVjmNdbfv8kF9ssqRPeM1A==","shasum":"7be5c82eb158f6ed29758b14fcfa035a6a99f6b2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.1.1.tgz","fileCount":16,"unpackedSize":294397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDLkvCRA9TVsSAnZWagAA6qEP/iT9nGtrwtIqpTAca4Ap\n36lkz1ebT5zAwXEqrOZoQuEwjjkpt0YsiTFIU+YnENtgRCHC9RHUjW6meqWh\nxrKC60ZFEY7dTc81SQ6JkRI/fRFNeKUpFlbyiWRYd6AHtsSlwHJBWE9IYC1c\nN4ZWlH1Ar18pj+fjZweAIBLr+0kfRAGgO3OKq2+m57FlwPd4ROh2WHtuijkS\n6hoBtKM8sV33sjdYQINi5ou5wz4gr3pzIIl90meTQV+VV/ftVAPYn0C4fAXO\nne0me9vTPtLanFQFXFVK3eNCjPMDmcKeEKJMPBsj2+CCRBePcb4KubYO9h6S\nCHm/iFkDwdgvdF+LZQ1TziteEz13ZfRHJAcdm3Jjc/OgRcqC5R+2JGzXe4gA\nRmqaJ8OpYvLebuarfOer1UOSOB2KSW9aTgEwENBs73ShaktK/xWy6VX6X9WF\net1jfcIJDCCgM6xc9F8U5vZLfv2Rky9uXrt7aZ/CTJTGJDyRwJ9l6tj/4m37\n97qage47E5GjQvklfLTxHWCop1dZKY3yOjI8dH7egGgUw8qn+aV7L+Md+MJs\nXiUdEStXGbZ5bOJj725hwLmOj7m5JXVvzsZbZkMU7cmwGtDcZTIeiHAJznaU\nOhk8siB3mjYTayY2O9o7vfz1Jo3DPhk2UolXQu3YxTOMfkxBmSBREwJwB5j9\nnoFd\r\n=8DFF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQFBcLtNnbDplO9Ju8/jD2yypLi3IGNRha6+Oa8g4epwIhAP+ZpfsZ6PnFIWXSMkc19AUHmW232VzHQoxCPvbv+9dN"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.1.1_1645001007294_0.4214794811626359"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.1.2":{"name":"@wework/react-floormap","version":"3.1.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.1.2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"51e830a9c3ce3ecf63746a43505a3ea0f12f5aa5","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.1.2","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-Z8GdkHCoZvJKPJa4a/DnoaQCie+h0MPBtpvuJzzQAPycWUZPq7+0Wpkjgq+TBOiYWM/4WdmEjkBSSkDmU+SEZw==","shasum":"9551f32a93b3fc43a8460b475575fab844475d3d","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.1.2.tgz","fileCount":16,"unpackedSize":294558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhSHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob9Q//Q660Q1go2Tr1x6Ot4j9mmB464XIn+V7/gCJyC3MTLRYlci9U\r\nICzrdapaBPCDxg2X6nmYolrdWRyMSybEkluugqaJcS1otEIEwOnNn8Iw6xI1\r\niyB51E3norSMdFt56IK0QSh2aPhJOifCV1aekFPjPmsTZ5sN6gdroQvboIax\r\nPabjRFpaT1E9YAQmspjY5GdNAmTeDqzlY/u5807Szxmgu1UK+x1vwAZA/5oP\r\n+9FNmxczHiebDr/QWtwxyVIot7+FCFK3f6KU6nNS32kSYuo+4aH/Mlz6AK0A\r\nw9QOv8frwuDm/dTtUVi8x2GEwnxMGvj0cCdtspRCoQDOCJgVtrDpvsHA8ovc\r\nbnywPHe08eCPCI4KfVxhpEUbM2tXaJZPCywYeRevgoYkDrQKgsGP8y4ZqYSz\r\n9XdvxxZa51TqVpzeujv6eKV3WFq32j1qGBblc4M28HGCiO7Y4LEGZYdjbgpN\r\nMKua2f6JZmMCdDyCZT3BDXXSEZksNgwlNSAQz3eGX8aOwSueKdr2daiOugcP\r\nt2rdgB5xCSp5L4RJmUOHcHDe4OICRQUY9Sa4sIWbAkFl1Wduaok/Xgbt/vmb\r\n7A9crNksL0clP5r+Yxdrm47YMy/QSWqzo4pA2nxP5cz869jCXvjuI5op7nVF\r\ndW3ao8gVZ+DREyvsIHiQ9Jynw+5IGXO2N8Y=\r\n=GiXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEfU9Cjy5zg/THJHqEahYNu3P4CofX0bAdq40varV+ggIgUX6KVuu5VE73Ru2MELAWOjj9XJJm3sl4lTxMhJAMg8g="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.1.2_1645089926918_0.6483901780025167"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.1.10":{"name":"@wework/react-floormap","version":"3.1.10","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.1.10","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"456b753a21292578a490cc6d42c8842be657ff89","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.1.10","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-7IIIY3fRUTlHuhPkA+ZPG/6CPkae/x5Hkwyd47sw7GEpT/ql9w9Dm/NdTGl7XSA0qUXOsSN9l1gFIUs7RoKWVw==","shasum":"d5067bc6c69461f137428ed37195978c1c90818f","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.1.10.tgz","fileCount":16,"unpackedSize":294723,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGIr5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYzg//bCX2qYg1PPFZvyJj/uj7a0viWzE3hwj4gtVlJSU7qWZ0g0Y3\r\nxa5+xy41o5QQfp0RjE9QQtfcPvHHMhWNrKjeP3HOLMGmqgTWTehlUMLX9X87\r\nQoXDWgm97F7Av/jwhGUh4bkdz9bPOO7FO94GN3iwRQjKymPn/ug4/ythZqjB\r\nejr7PllGkQ/vX4FnE8X0lwk8z+yvD0HHsCqWS16zCDDziZTk50XBoCkznx0u\r\ne2lxxzgDKUcGdFtPWaWdM+lBzRYdXDASGxDmYKJ6kHXxiOQ36JqQsVrvHlMO\r\nHr91hcueuc7itci2/NRg7AMWWhNF9G/wqT1bfqDNCJ/GypcBup5XUJ/UhhgA\r\nOeAT4s6cbY5X9aYfTpNlX+CLJeCkPttFolPnFwkG/dIulvBSKbG3vM/ab0FH\r\nLp1VeqEPYnFMoH8YtLYZ3B0DEapjFaq5Kue270ODFEvAl9sZDSyX3u1p0YhU\r\n2ieCZ//Wu+hocn+kmFqNuSj57aCtGOCuYcaLP48qZQ7zMbhQw22wDvk3aSMV\r\nj+CY40/Tvy9DnhqARM+dNvgz7O0xsWdW29/Ki/6efHJRdk1WCtMgsJXjOZby\r\nbgrI9OGCAlwREANyqKsGLUxud/OS/3BfKs++MEcvAbxP6cJ/1qzOJFYlyTBr\r\nVwC8oEElq4gt85D5YQ2wo5BAqIss30LU290=\r\n=4ph+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcCG6JTNasodV+tu1HvdksxL6LD4CRWxb7to01ZVSAMAiEA0oAUjPcD1jqIj40Gy6qW31jkYT4fCfV2H0tGYDZoGRs="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.1.10_1645775609226_0.32859909779298735"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.2.0":{"name":"@wework/react-floormap","version":"3.2.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.2.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"9ce04e1db2f0ea7ab0c57f0971fa8fa4b4e7f166","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.2.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-su7EwfUrqr0MHjlGTIdHfBM0uhSl0cfZMDc5g7jArqaijdQE11o0ubxABp2O2TaCIq0Ha9HiLgZk4FSlwUsg9g==","shasum":"6948ad0c91ae445ab19a83c46ebe5ae7705fef44","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.2.0.tgz","fileCount":16,"unpackedSize":294882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGLZVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6wg/8C9wiayjdsHfl6s2xPipS06RtrE+Gi7CHqmF2Vxhmhxdgnw3W\r\njgVWm4jhww5TeiVfVK0dGn+oq0AeQamotE6QbDJPCzEqigrVs08VdM0WgcrL\r\nLxJcYFT71Ar46OTGgFcOPbPr3xVascC2TnhHrWvYgdGmJ7D0t72xQFkn5Dxg\r\nobTynHthkrwJtLyblgQzcnftpuj7Ek2mFIbhn/igm5GA3xlr3phVwQffJU+3\r\n/zJ7cUFtoe04fnomi3UFrKckOJwHieV5f/VmQ9roX8BTaxQLk2nKT72JwdlY\r\nFDYw0xT7LxmNZFkjLym2eYsF3g8/9L9jjT6S66M/re95tREqK0BXoJ8vOY9j\r\nbspdFoLN8vq6jX6pOLGZlHYRnPMhm83M0rrviDO5LlDry2W7HzDgGXB+9OtA\r\nlVKUiaE28J6lX8JvctHFfu0uv8Idgxx25VvrJz1ebBLoXNAKuIZoalDLMd32\r\nPdY9zH2HWxdB9GoNMthq+ThnsR0lRUQUQlQ+NM9ST9eB10+IKxMRqw076I0W\r\nN7Odw6uFw8+dl+UQ7N8JUTGj9lKtDHEk1uaJDQjQAOVCRg1jy+Y8K4ChxUT+\r\nqtEfo/A6b9daqqluN+b1eEKepyLmFxWLGDe+VCeWZ24RqiFztvU/9hrb1ek3\r\nDAeCWYt/BFokVlDNvGi+yJVV8VYnfkvPsLw=\r\n=Bb2P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdeZn/ZDWyBhDU0GBux2xLxp1KXqIhJUrY6O2PJFEvFAiEAjivfiK+PxleIP605guM0QyI/FaTBaTpMpIDp60dLFS4="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.2.0_1645786709712_0.40901570366619366"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.2.1":{"name":"@wework/react-floormap","version":"3.2.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.2.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"f33b2ce1f115c348391c5b6aa23e70c036a629a2","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.2.1","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-kXK+IsRPhTy33Y0Y8YMoMmEO+Rrfw4tczf64kW1YvjbbPsGZBi3crmywRNStFx9IoVW1Bk61Y7VhxggPQONRsA==","shasum":"af02ce454d006e6014082bcbe98826f902eb8a83","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.2.1.tgz","fileCount":16,"unpackedSize":295043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHNjuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdYhAAjSWatLRX8UVZCbODTQC1ZNx0rX+LYKi7k0geoq2BXDgV8IO0\r\nshOHgamnwZRznzB4L1YSTzaAj+FYgXUNR1ZEknK97tGWcw07Kl8K8Qh+1rq3\r\n1ZxfDSLe26XW7nyUR5rMQ4MoRa2E7AXGykfoFfSNeStha+Nwtldl3GCxWhzV\r\nH0YMJMBaCIOkSVtxarV1hpH5VN7Z4sbfx213f1EUj7kxW3r4YVfgoNc/qXiz\r\nIVjFl7T4UkJrewqHt5U7/NUyL+wPi3cGc8dtsw6oIbTx2jJ6YOKG1khxmf5H\r\nSaSVGfPDVijNgiJ0e/ndc4cXH8VjYn7oM5L9uHb39xXexWPUwTQklHtid+qi\r\nViAaa9+GJMnSQuAcXQmA0RRxNZTzUcwc3/MsHfdnHBZQNzh9/Z+XyeHxG58o\r\nOyOMUqnuOtqhGB+MyOP1hBMSzy0spqW1qCrAT53BYbsTbhKulfd4XlbRorRS\r\n3IzYWmwkmYzPVyzyxIBzcLOtn5ssDXPR0P46KqdrR98pnlfJsZCz6ad5bzM6\r\nZMUbxv6ubHuy1eSesecDov8OANB0YWmm9GYUsXDU9BJmnliBwtjW/hvWFKcS\r\niM4K1LBWvzajzHx9rwNmBN3GP9P9+d9eGVEe/DRK+5LyFR7oA21dRDM9e57L\r\nR4QC70vUtFrkCOhBxdO2NBIfexEPZcCJn+Y=\r\n=nS0z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHCMJy1+ieilx3nLVzKMe5Q0VHyoYjVk5D/jjUoDR4g0AiEA40BE7I9TxeSrHR0sG7Nw61Gfm0FQcJcX76Dm78wO33Q="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.2.1_1646057710353_0.2526117053884456"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.2.3":{"name":"@wework/react-floormap","version":"3.2.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.2.3","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"842e1bcf8f2ea74b41186e40d200741d0558dab8","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.2.3","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-fuMEkTPVbo+5jxMDbWqGSBPQBUC8WG8VjI01aCr2xjcM7REZVJ8yu45qXhZrCMA2iY1PCfaii8wSD+6TtSgC4Q==","shasum":"15587adb74cca97e88ee450d175bf0082f86faa5","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.2.3.tgz","fileCount":16,"unpackedSize":295204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIdJ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorWw//X8MdLQH4460gjpENLzoO6nDv+3SaYXViZQYt+tTF2RP0+zgP\r\n7IdxdeySFyyPav6UpLqJ9uiTAnZ7a2W8Y2WOeVFcwGKFh2paS0MfQd0TKD+G\r\nbTVPsx+4nu910iEF8GSHLbOGU19Ngq3cE1BMESCZ7lsPzIRAgcVqL7MH9thH\r\nzkgHuS/FYzZpx7VJlpLY/TtFDReQ11dzhxFfKCr6LPHIHUPqJ/YUpw7ZqrnV\r\n0AIADUlWYujvSMMEWuichas2pow5AK3occtMxvPVxT+Y3GUa734892K4kAEO\r\nXmcMrTNzvYBn2amxBQEebK7gAFFEiaTKp+lRBtY0DROA2u/NHqAsSv9aUUfr\r\nRiOroZxUVs/r4NpJCL/cbZ9eZWADSME4lhL0rA4zfevkmwx3fTwzVSeP8fYy\r\ni1tZqDvXKfAkR9/g0UtAbaYChXR/1LPhUVaTM2G8SclahxuDWo/UBqST1pon\r\nlkZ5v3GAQZRFiXmGjHcVLcjCMlv4FcHSFiOpOzXucWQ4lYALGGbhu7c/dCZ8\r\nUPnTsYlhbYGC3FQWkCG/hJHjB6mjAFjn4wekTesEPcypRnDOmpbk11NYFB34\r\nVwRV2zegduf0K+S2fO3QpCDmFQfeSPJ8hV0sZECy321OtC/+Hw2jIwfhF/Q2\r\nVd0HXEDaF4ohAsUVtLPm5emQbmC32CmNXQM=\r\n=mb7/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGzk+rStGfWaOs7u3R3iMnCe7e73DX+NKjI8e0LRYawAiEAiD8sRjh5ulUZBNNkV0Cl2ta4SKYLgnfRg/u66faNtZI="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.2.3_1646383743186_0.5726160139129131"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.2.4":{"name":"@wework/react-floormap","version":"3.2.4","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.2.4","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"559f7b56b75a2f4eaff7c5722ade9d7f132308e0","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.2.4","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-47kDfg1P+59jMB4LnopWq9qkcVW1lpao0y83UhjtYix3KVsKnzvGo5kls+8SbULxqJHIoyhMbAQLnRvuSzxiAg==","shasum":"ca2b5409f56ea8005503f0c6373934133d380d6e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.2.4.tgz","fileCount":16,"unpackedSize":295365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJeTtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpp+BAAo3fJ8XUFvb9NneKgsvjau1bT0jFOF/ufFD9UqPgMg+AW/JJt\r\nxSIcDD2njBJAcsCyTicPtb9yuA1zvQMz7TPRfOpbsrs94pS8yi3WV6/dkDvO\r\nZeriBngeOJ+LJ2x3/UYT+5NIQsvRflQJlCw8Cjp2Xtufe1D8jwZsb2d1acHw\r\nbU0Bm+slRDUnSNcyn7hWApoj4KC0lOdK/D0hsPHWE54rRlqHitrMNMgoCW24\r\nbXuJn9MME8hcp+dccB+StUd9nfjvleMoujsLs+CLurWzoVGBxByAZPRuOIWA\r\ntAHuECSfHrQ7EzpD12XIQs16KyouMZoruxwzTo9mfaUj9HNbFxRdqVRx82cw\r\nf8f6fXBwvPJCerusskViRFiR27yV0id4Pqq20e3nQwr4MUSunGL+1dnc1OJz\r\nQD8ZkR9ldzjHmARRwTcjxOH7uuz/8a2UxQDrZFm/UPN1OHRgRvr5koJGIW9w\r\nrRH8WDYaWRP9gXVao/7fkxLBf1zyoGt1leQ7LWeqCa4I7PlC44qEWvxw3NHU\r\nYBSa0/aq/4n7c2cMB/50hxUjzQa7G7UPmZSyo/FHyF1Ifg6OP0vW+y3WD36Q\r\n++0ccooPUMVKX8RrPldr4yatLNwXqZu6OCBk84f1mMp0R5khzoU0GCkj8NDl\r\n9VQp+Im5q83mYxbRK5ybEcKKnRXNOZlzI4s=\r\n=uf3Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC78Mi/NR8dguCdga3B5RfKMSQMg6bAai4xWovAaR24zQIgYphsuWi0dsK2AjvpofBS0P3VRg2/yrqS9jy2pF1C7SU="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.2.4_1646650605203_0.8548319977255896"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.4.0":{"name":"@wework/react-floormap","version":"3.4.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.4.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"3f5558c5691db23dbbde70c2a8d81f69fd34c413","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-NgEnzc9s/65dzP/QCt/guK0aeUWyA2etJLg9U0PfeTPQjeblVWb5hACXa6d31vv95wzI9oHaaXwt9s9B2eIAEw==","shasum":"c09af50a5cf1e6208be15e15eb52ab87422ff012","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.4.0.tgz","fileCount":16,"unpackedSize":295525,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxhEqiNGgMROIjptMek7HQXuran9HxLg0I7PfXqSGa3AIgQkcZGbY3iWbIK7+FE99ex9lfuoojqiNb6wnjJ16U4ZY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiRsKOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9aQ//ZdU69E6Nbk9UMlj0wBD/rEgyuGAyz2Z3dcu7zUlsh/cS1Vq7\r\nDAMg95r2J5Mg3XEBweczoFdNUI0jUFPi6Bebvsu7N4K2Nynor7POn0Yqon4C\r\nfMx42u1tIi7EKI/yDe5Gs0TEJDHD8Nbx8z/gBTnvJQc/wFu0SSml2DOI+UEJ\r\nSnU1JG2zzwdonK1mTzvJTIABA2hXQvTwK2dL6VE97DQ1Yvkxm2U6iqZbXiRg\r\nLLIHPKWjaampcUBD9gbI++Yi482ksxsAK4bk41Yl0tFCVBo0hJu95+tzH4zZ\r\n5P7TNU3Q+1AwgdE1lRfQ+B6x+fz/TsXlRGPQJ/9OVihIsObvr9MKW7GK02TU\r\nSqWDyo5P+rXPRv9D02pcbigf9H7VCUp6ujBiB6ZQwqMc7nnMvpwGp575xy50\r\nv94jmRdgtGVkXB6Y9GuLT2Wrky2C1USKgIgqhihUzOiGCPFEMEMw9GLSj8HU\r\n2ekhSOzdoe1yzW4Vm31I/MKdZnC0YJzjxq+0jKyRtW5RgJKwbY3LRjkXn6xM\r\nJEEa3xNduiHjac8fSqzkPP32IlSsMoZKJ7f56jt9RKcTDH4nzp6L8hJ9AA2G\r\nhM0P/k2O1X9SbN2fTZ8DbIJJzQo/qXCk6U4KnXge2vWh9Db1B8l4Z0XfWwPz\r\nRDBX6EHawzdajzHIxc6EaBCkneyxIXORYFg=\r\n=rWd7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.4.0_1648804494182_0.9251881665568444"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.7.1":{"name":"@wework/react-floormap","version":"3.7.1","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.7.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"792dec6dcc581322a17b538bd84554f7ea90cbf6","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.7.1","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-FgFQGYPRUUO9meHW8Hzd/NnpjybMotvcUdJq2K/miG2QAyaIx3MCqyiWSKJXSUXMefP54CTYdkTBjWy8LaoYgQ==","shasum":"3a8283f339512f644e800cb270979e907c55b37e","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.7.1.tgz","fileCount":16,"unpackedSize":295686,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3ub/ehdjQA+gdGy08Nmu3n2wWgwXxj0waeyj/gXbllAiEAimm4CNrAM2J1z2dzMsOsKyQz1hlg28SOhziow9nQqnc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJilwSKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzoBAAhny2++QfTmLwzxEHZVTCU3JGU3MK1DWubTue0GQuFsm2RieS\r\nxbmVzPLRyl+2q0GSNhJJ0y574eVAKIfFflLzkVj2uuamlToBa7JIKSI4RXZE\r\neTFnToSYVOuNi6Ze+nN9aHHzgwfodF6aypWm/RONt1BfgwSxQJvIAg1iBtzn\r\nCDOzI/ozx7VQDf+/5QRHyHzpeSbvcMLQ7MpmYxzJRnTWwbBTOidPdWMeaein\r\n6nXcy4PW8AmA53HbmZUBzVqCceutlRM3jzDkNNW9geNrK7Vd02LSGGWoVa0E\r\nySZvnKc/Tyo75l07e1TtReMeP0KNOEsEDu4dm85V+ndLdpp2h7b7UwxUK2hD\r\nb5240Tr26bXlAqCfZpBPpyrbnsMUakSaNRf81d9tBUbJ+Ya/XOsGziAAZ9YV\r\nn1njWladJG8SAEzT3AqLcdXo2jER9uJCoc3H5YifKVDg+vOXikJt97SejTnF\r\n2umh8bcGJ6A9sqQ78urOMEnbVduudgziHKteKCgoemNckwA6Bm/JSPazhM50\r\nBPZpPQ3D+wCwzm2JBkrdlvvhiBdMRZ9B4kQK/ZDRxixaJlU1eXDe9PETI6Je\r\ngA7XO0TOtA94ismBuW+yfI1WYJgLIJs4zP//E8hT5ak2pf1syQIJootB1qOu\r\n18MRNvLr8Mfbkgorc2UB1YXf5lrkVtLMAro=\r\n=b7Er\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.7.1_1654064266175_0.5139007856552964"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.7.3":{"name":"@wework/react-floormap","version":"3.7.3","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.7.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"e01a12ee62265c3ac512e26aa08f301e9dda6e50","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.7.3","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-84R0tPaHpJ28Kvn1XisjhpzQNb1ZM1nDiQj411WU2AUoSCpGC08s8w9QS4OFwIXt8PUeJgT08+g02sacwcR3QA==","shasum":"803efce8102a9fa46376f1712c016bbb1967e3f6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.7.3.tgz","fileCount":16,"unpackedSize":300589,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFf++eByMr8oT/tIZ27ySeWpG7DdmXXJl1jd6H12lwbAAiEA9KX+hHZi9iqRwdm7mab1quTp/9m5Wa4UfMdSkBR0XSk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqZ7bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr60w//ceHVUj3l4oAPAJDDkQTaemPwxMekP1P6SCnm0UQvRmdkxJVd\r\n/LR88atTaQRCTc8qcd+hfsh5tijyf/ScQkUEJ+t0hmVNl6FD88ZCMqN9ihpY\r\nkpAVEpqLH8NKB/YgxPV3Dic2cOXW3X+dJiTfuqF58MXKQTpinNh3HNv4tfac\r\nr2Ej/A3S/tOokDCv19O76D68bgIoii91shCfZsbIxkiKY+bWKWRucMyJWimw\r\nV/+e678DddIqeiwaHtuETFC5Z1c/85FQIsZ0wgIoPBAwyQFoL86hD1YIRNTr\r\n3D/S54g7Ugm/vFlsj7ZthlP/NTnXqA5vgcS4Nf26gvMHa1PUmD/+Ov0Ioadm\r\n5D6eEyVNQ1QteXHKcoE/Wh+7KAqFeNzCSuqYajzD0liXFCSk/7mgsl4ElpXl\r\nQ5a1AdA4HjEnL1QUuYiObwJr0Av4Bi5CG0Ng3Xf+3X43GdiBRNGRd7ksNKeM\r\nZplMgumldwwB+FUt8El3+OyH5vPdBV9/4ecuGbCzGCZugWEJpa5jbTKeYAV7\r\n3GVa43r48R1IvVDxOKLml0WF9p6V2TrquzkPhIZ3ueTRr1t6ntwZ9UizS9o5\r\nUFnrpSyCUVnbtvAPe2JYJCU+Yc+1FmfNxwECEjtazHe4J6YcEFBbjFjKqDRa\r\nBT+3Yc9S4Etw/1KLwQEouYQQqMgVoJklYAo=\r\n=j+Q1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.7.3_1655283418752_0.6928025599733054"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.7.5":{"name":"@wework/react-floormap","version":"3.7.5","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.7.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"addd94e5fa392851e8a924157ee2c78ab86421c5","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.7.5","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-c87bxJFoGdz/fRex16S5PPw9q/CxbYgt+8wrxPPS1udBlANuajeJq4BOxMhwWIiY08gq6JH1dEIN6mOVY3y5xw==","shasum":"a623142f5b746e9dda20ecb0aa93ac049bc4d3b2","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.7.5.tgz","fileCount":16,"unpackedSize":302742,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaezF2Sn+g5z4mMzky+Pg33B5+VXRd/ccMkGTWAeswOAiEAyf/0TKhsVUnycGr6/qEFS/2hJJhvsN0l8kO6RflZfpQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisu4EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Wg/+Jca2ZxYvYFkhvxZ7p/m+TxOweUiGRjGPdiyddXIAiorUpaBL\r\nDYq728kRqAEICdWkPjP9Rcgedxd7Hn0jsIxgaSHUfp+TNBNlKBQ78rwCZ97z\r\n/a0oCsMYL4ZcQUYcnw8ETDGo3tKh2EZ2d0jZDVJapMK2Zs1Vvd/4fmpivROv\r\n3fbzi5ROIcrtHMddFIEh7yKhDNYLU4ZJj9mO+8h5+Nw79SK6HGcrolgwstKx\r\npLYEpWmvD1LoVIy7a7q38iMMJExvi77bEFpsGBzUlKVf4m2xvlpTcwiqj8B+\r\n8N8u4dNl7xQrQpjCCqbsxfopKhOOJbW+Zc7ajPCffGxGPNlgNkQayRXC3q5o\r\nyGpVYhCmANGZk9P9iTO1lhdnVYVoQTfna/yHN4EWeghtmJ/Ixl/lOV/VhoZT\r\n5PE6nO3tP529h1WLXAIpsyLwecvEtAcWvBgVzfl6q2Fb6k3S8oj7NqE+fFDQ\r\nONnsjqg2FUBB6v163t1SWiYUBPQOETj7KTwYl53lIKw2vsd/BWan6eaGhPW0\r\n4sUNP+apAUBi+XvvKk8ZEFt2M+vax2ZPLiH56fxHuFIskuUbiMP6GWGQw77m\r\nf9DlGkXoEeIWmSfXZI2LoY3ftqBwGGiYER1DKZFhxRpvSJ6tJhjbZ2qmdTGX\r\nB10DgxrVFu2WWTUDhT7laFORFBo3HNEAh2w=\r\n=sZAx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.7.5_1655893507795_0.026052603385326778"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.7.6":{"name":"@wework/react-floormap","version":"3.7.6","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.7.1","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"b669cd11f30fc7363a7221593a1d0791b988362a","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.7.6","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-JFkAShP3hiwW3mh+vbeoasDuTihBwZkdQbLcFIk+tS2tyKAgeRGrFnZv4kLeDzt9DC28h00VULZpptTA/2Vl6A==","shasum":"dc8ea9ff12f72f5724f3b2a8c43ea2f7f0322da6","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.7.6.tgz","fileCount":16,"unpackedSize":302042,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEuPA8jXGTBcIOLaPPGOleGEE9MGFsFC7sM/F5VwWIkbAiEAxf9f/NubLJldTr7nhqZq73JbVCtOWO1PyvSpzI6DBRE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJisvTjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUuw/+OzsDzs8tCL/mZbxq7ej3JXXDHZrV/aFct9Ss6rega7f6MDaM\r\nvuqxcpdsI5eM0UgU7Hv7quEhuTlffLYCkYg4RjPIMs80Oiw0X969diHb/bg8\r\n7QiD7I6Cboll2B6C83ZolhIos/Sqp6kqHaOvEN64J6Cm5QvHIoB8cBsnPFAq\r\nDhPS1R6XhVAEOevXLsHBkfJP3VUgjbS43mtefu93FzQ6Q/kFnOlXwZAtzLFU\r\nUHTi+NmlqdRt6R3+6aN42ejfi08SOvudOmQNUff5Kp6eHaigKJolMG+QdtGR\r\n76Py4o+tUDHdoHkLPgPbA+vprKZI+hcUmHVX20bvrIxEXj/cooVuEJ4cRbJ0\r\n1nGt5TwhThd2gdxqezDZnrRVOdDuLiAmJRyqlV98sbozGRyZivFNefBNTaR3\r\n0LP9uMRKDTIHEu6GsKFIgsDItauX91yRyshbHNc7puVIfDNns6OyMG41fKKm\r\nh9a6nRnJ6Rq0xysntXkynNDTgpsnoB7JbALoQlB1F/Mp+nS5GBcPvj/YNCqr\r\ndIe6mILeYPi98y94J0emz2zeEUf5ZfaKxz5YMPocbHDrsw2IbyFO2Lyua3D5\r\nBLWIjtuXksmrvcX4McS32Q2cP+P6q4wl03MfHpRqww1biVvOw9WTKLraTjAD\r\nkIxfjKTuMZQIG0Bwl+9AmhMJmoI21muU21s=\r\n=dhHV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.7.6_1655895267560_0.7880370474253808"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.7.7":{"name":"@wework/react-floormap","version":"3.7.7","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.7.7","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"6b2859764ee9c3ef248aacc15eed75afa576d6f7","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.7.7","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-04kYmcPLSoEV1XI2XoMARyV2EvRF5vGTfWr5IdBdZUE9JfExBCjLjUAuwjS+TPvQEMgpK68qhx1q+wHF1NswLw==","shasum":"910fd69f0922b89c4ea87076da0e023d1bcc73bd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.7.7.tgz","fileCount":16,"unpackedSize":302203,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEzPdSeG5paOIXxgQMG5MOdoziHpT7OhyfvRgPR++dNEAiAaIHQSOVeS36sXccBlgOnY25IHnC9Vm3uAzXWef43hxg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixq8KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTCw//eFiKe5jg4OONYq/O+OCO4dFSG4qUKxBN7aaORCLbXI/fcTES\r\nExE7FgdN/UriSNG3GNBeys534ox5/8Op+GnROdIXZ03x9C9sI4jJ8gbGUD3m\r\nkuB8GkNYNUKQBJBjxpGhzMg5xKRLqarLIb5ITwi0RBo9QGOKBEuxSe3GxWeD\r\nEPUdnmQsOAtAb6Y/lK6bGbjShI13hBqQlPZrLLGohrTIUspCHxNqc1CuLg5s\r\nEap6vqM9sS2SncZwZhSvHtNGRkWfOIBfTzE08H/k8ZeFZ/Y4Db7hIxABLGD7\r\nwxB7C4HTC442bixOWA39rFsF46aZylJisB3UiPfyelcf6j8pAp5uoSI516YH\r\nejwTEJpOngvgU3gOtnEg4W3fcJKGB4HdeCoWx89RpY5c792iNjXDbqxer6+K\r\n1UcSHcySriOskGgsdv9Dq61C4gVVpjZRZYKX5wptXW/bCJg5pJAhPrfFfrv+\r\nLXYk/vxweTq4FXmwuKCNm4J20bI952bSN0m+8xvse6AUfZbQyLfaKqDCJvHx\r\nm/fB9v/Ja5E+hfAygcB8LMGmXSdlF886dm9WgJCLelQREzdRZsih0B7ut+Bx\r\nhO9Kx3ctBoQUbSRjS29z5vogvwzMZsuJxd6iTI4v2YA/KPQKWMBX2zDG3M9b\r\nH6wghC8O9lDy59D17WLySALb8JFsfEkIl2c=\r\n=k/Wf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.7.7_1657188105759_0.7302903903862432"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.13.2":{"name":"@wework/react-floormap","version":"3.13.2","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.13.2","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"8406c65ae007c6d68e1dd3716b63781073b9eed6","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.13.2","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-Izpc5eEf6m5+0CEoeVp+8PDdvr7T0BenkJRyaon8CekzdSsC4kBLHSRhahpTlYoggksHZVrCBrFFRSoDSbdqaA==","shasum":"21fd1c1a27e874b636e8a9f6752e08c1cb5dd7f7","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.13.2.tgz","fileCount":16,"unpackedSize":302369,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeSlzMg2rIRUFWZonqiNDkIOXhF65SlXAMvvsLkQK0SAiAPC70c+pUrGY/Fl2S5ZV4czgujpi/TfBi3vnBK7aPuhg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHcLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2sRAAonzbt7CmVOnUz8TIkwpSUhnoio6GrecZrs5k6D2WYa7o7nmn\r\nBiiIjd2JBegMfsCvlXEKKl/pNftm2D4T57nZBzYdXrHU59K7sPzVsHa2YEVx\r\nM08L07JN/xRjKvbNlmHB0z33uAaJiaZZHzqZKrMBUWAyW45ThorCtWMmCQdk\r\n3WK+Nvb7SFLvWGjuTsDYngQq3QFF2yNRW2JqfAP4omtMXV4VjnOjbK9KBhXm\r\n/kUifQcDJ181Qu2Xtq1fmRVa/23D0zeAkvKKbniCCA1dJm27Xp7C4ayAbSdF\r\nyp4G+sycJM5zhS4wEnFceJtHXBnahFGNb+TcWEVNQlJGiidECaDP9C7qwuM1\r\njj1BQI4RBrGd2LLFGTf1cH3uUuVGhTl16xzXXKo/fF/F6YL2HY8JMFCV3KQT\r\n+42oMFSUZYrTxotC1AdhEOPjRaJtYpN7fBrcqrAPUB+kPoDdbCbuGH2BNrEm\r\n5cRYkqEoGtr9UpZJAfxH4XiFs0E/d5DJSkAJMghsFJ3vbYDxxPJsEe45u/R6\r\nLVnd0RSu0WJIZPFC1NhgCb65gGfbIzmQyrIUF9IeQuNDyHsKFMjPP/hO5C6i\r\nfaUj0OfiSY4mjJr/wpX+QlSdLHx60cqnOTOPtoMeYBoNA7KxNx3TYAG4/z60\r\ns8L4RoAEX9rzaSItk/1JIUwFgC8ypKC9sSo=\r\n=qUZS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"acartmell@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.13.2_1667790602956_0.677032737198989"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.14.0":{"name":"@wework/react-floormap","version":"3.14.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.14.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"b245a459cfb30bb1497487fc6de30bb2cf0ef92a","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.14.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-KTB0CNk/OUMMB9mWun1xv58Iydo8KV91glMoMKSJs3aEPzQjaYWesIp7eJ8rS8tR4+jQowazaCUghR9plLRBAw==","shasum":"c51906cd32a54cae701fac260e0e61a1b7f1f7fd","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.14.0.tgz","fileCount":16,"unpackedSize":302532,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEWj21D65i+CH0oDRw+FSTXcJM6/pzQ3v26N61bpmZg8AiEAqRNVCLTZ70KCDPNquuxBk3dhPrakvMSBsBSMJqCiBTY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdeVuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvaQ//Zz//vmQFAk6vGFHXJB0HZUuYQSk7pzjqrGLoUboJe8Jf5mte\r\ncAs8H0yS2S4rSS0fHBW3xi93zfKVhwwWehFBiRVd7+OQ7Xbl1eIhrcOf88lH\r\nUQPb/lJT31RiithprioWkW2JCALKSp1tQszDBnEKenlqP/JmdJL7482kus8L\r\nIff4m5U2oDRzEG78htfFiFQrN/DTjb0HtgajoxWfDsp2z3hDNH2w6XPHpMpA\r\nSlf3rowrDFdlTE3r0qJ6Q/WS93SYydDu2fEOxkW7aQzYK4Pv9oPUI0LwvIc7\r\nkqZQ5hoWPSn9ybGbVcXtpC0Ax5BkVzYNKPC0rUpH3F1Zfhu7FefPYD7xO7XJ\r\n8dCgV99Z9Eu3CeASw+D44hBvC8h9eJ5aDUFerEAeWYdVU2B2YBr9L7OBfWsL\r\nCYYRz3ZBRHocnzrrGlMbS0M9I9b2sJw9dP3iWsNyHSsfvtt/+9M9CmPv4VIt\r\nNnx6GhnJDkm2cTfSQeEW/ybsyUs9R6EWO1CGCypB1BkDmp2XqtLhQyh6GFNs\r\na3xRxNsNVXvm0N5OhKNqAxexcfDnMP37Od79HDsOnc9b8yf2FJwm8yJtj3mG\r\nPxLnyK4mgbKnV4f4Yw6/+4Q2ReHplW4l7CnYtiLv91mAXIH5pCbXRbkw9Yyw\r\n+mYC827C57So6BYxngRLDfh0W0AXfceBINc=\r\n=OP0G\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"acartmell@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.14.0_1668670830633_0.775160380975088"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.17.0":{"name":"@wework/react-floormap","version":"3.17.0","main":"dist/index.js","module":"dist/react-floormap.esm.js","typings":"dist/index.d.ts","scripts":{"clean":"rimraf dist","dev":"tsdx watch --verbose","start":"tsdx watch --verbose","build":"tsdx build --verbose","test":"tsdx test --env=jsdom --passWithNoTests","lint":"tsdx lint"},"peerDependencies":{"react":">=16"},"dependencies":{"@wework/floormap-sdk":"3.17.0","hoist-non-react-statics":"^3.3.0","lodash-es":"^4.17.15","prop-types":"^15.7.2"},"devDependencies":{"@babel/core":"^7.7.7","@types/hoist-non-react-statics":"^3.3.1","@types/jest":"^24.0.25","@types/react":"^16.9.17","@types/react-dom":"^16.9.4","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^2.6.3","typescript":"^4.0.2"},"gitHead":"37c1407ececccde2b6432c71ab20c2cbfa5801a8","readme":"### For the version 1, Please refer the documentation from master branch (https://github.com/WeConnect/floormap-monorepo/tree/master/packages/react-floormap)\n\n## React FloorMap Component\n\nReact FloorMap Component (Powered by FloorMap-SDK) - By Location Based Experience\n\n- [React FloorMap Component](#react-floormap-component)\n- [Installation](#installation)\n- [FloorMap Components](#floormap-components)\n  - [Props](#props)\n  - [Events](#events)\n    - [User Event and Data Change](#user-event-and-data-change)\n    - [Mpa and Data Events](#mpa-and-data-events)\n  - [Rotate the map](#rotate-the-map)\n  - [Desk Layout](#desk-layout)\n  - [Default Map Appearance](#default-map-appearance)\n  - [Styling](#styling) - [Example](#example)\n  - [Advanced Styling](#advanced-styling)\n    - [ConfigureStyle](#configurestyle)\n      - [example](#example-1)\n    - [Overriding Style using ApplyStyle](#overriding-style-using-applystyle)\n  - [Access Floormap SDK Instance](#access-floormap-sdk-instance)\n  - [Extension Support](#extension-support)\n- [Development](#development)\n- [Demo](#demo)\n\n## Installation\n\n```\nyarn add @wework/react-floormap@v2\n```\n\n## FloorMap Components\n\nDisplay Floormap by providing `buildingId` and `floorId`\n\n```js\nimport React from 'react'\nimport { FloorMapComponent } from `@wework/react-floormap`\n\nclass MyMap extends React.Component {\n  render() {\n    return (\n      <FloorMapComponent\n        configuration={{\n          appId: configuration.appId,\n          appSecret: configuration.appSecret,\n          baseUrl: configuration.baseUrl,\n          spacemanToken: configuration.spacemanToken, // optional\n          mwAccessToken: configuration.mwAccessToken, // optional\n        }}\n        buildingId=\"b308b94c-bca6-4318-b906-1c148f7ca183\"\n        floorId=\"54c2fe02-180f-11e7-9312-063c4950d72\"\n        onClickSpace={(e) => {}}\n        onMouseOver={(e) => {}}\n        onMouseLeave={(e) => {}}\n      />\n    )\n  }\n}\n```\n\n### Props\n\n```ts\ntype Identifier = string | { uuid: string }\n\nexport type Props = {\n  configuration?: FloorMapConfiguration\n\n  // Render a floorplan\n  floorId?: string\n\n  // Provide only buildingId will render the lowest floor\n  buildingId?: string\n\n  // For rendering single room\n  spaceId?: string\n\n  deskLayout?: boolean\n  deskInteractable?: boolean\n  extensions?: Extension[]\n  manager?: Manager\n\n  selectedSpaces?: Identifier[]\n  highlightedSpaces?: Identifier[]\n\n  selectionColor?: string\n  highlightColor?: string\n  backgroundColor?: string\n\n  onClickSpace?: EventHandler\n  onDataChange?: EventHandler\n  onMouseLeave?: EventHandler\n  onMouseOver?: EventHandler\n\n  initialFitContent: { padding: number }\n  initialAzimuthAngle?: number\n  initialPolarAngle?: number\n  maxPolarAngle?: number\n  minPolarAngle?: number\n  maxAzimuthAngle?: number\n  minAzimuthAngle?: number\n  maxZoom?: number\n  minZoom?: number\n\n  enabledZoom?: boolean\n  enabledPan?: boolean\n  enabledRotate?: boolean\n\n  // Deprecated use configureStyle\n  configureStyle?: ConfigureSpaceFunction\n  onError?(e: FloorMapError): void\n  onSessionExpired?: (e?: Error) => void\n  onLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  didLoad?(result: FloorMapResult): Promise<any> | undefined | void\n  onRender?(result: FloorMapResult): Promise<any> | undefined | void\n  didRender?(result: FloorMapResult): Promise<any> | undefined | void\n\n  onAuthenticated(token?: MilkyWayAccessToken): void\n  renderOptions?: object\n\n  floorMapRef?: React.MutableRefObject<FloorMapComponent | undefined>\n\n  renderHoles?: boolean\n  mapAppearance?: Partial<MapAppearance>\n  floorOutline?: FloorOutlineOptions\n\n  loadingComponent?: JSX.Element | ((loading: boolean) => JSX.Element)\n}\n```\n\n### Events\n\n#### User Event and Data Change\n\n```js\n<FloorMapComponent\n  // ...\n  onClickSpace={event => {}}\n  onMouseOver={event => {}}\n  onMouseLeave={event => {}}\n/>\n```\n\n- `onClickSpace` When user click on a space\n- `onMouseOver` When mouse over on a space\n- `onMouseLeave` When mouse leave on a space\n\n`event` object will be contains:\n\n- `id` - ID of the space\n- `payload` - Event information\n- `data?` - If user interacts with space, the data field will presented\n\n#### Mpa and Data Events\n\n```js\n<FloorMapComponent\n  // ...\n  onDataChange={event => {}}\n  onLoad={({ loading }) => {}}\n  didRender={({ building, floor, spaces, objects, options }) => {}}\n  onError={e => {\n    console.log(e.message)\n    console.log(e.data)\n    console.log(e.options)\n  }}\n/>\n```\n\n**onDataChange(event)**\n\nGets triggered when data inside the map change via `floorMap.updateData(id, data)` (An floorMap SDK instance, can via access via `ref.current.getInstance()`)\n\n`onDataChange: function(space: Space)`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n`onLoad: function({ buildingId, floorId })`\n\n**onLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start loading data\n\n**didLoad(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished loading data (but not yet render any spaces)\n\n**onRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map start rendering\n\n**didRender(event)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when the map finished rendering spaces\n\n**onError(error)** - [Map Lifecycle](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#map-lifecycle-hooks)\n\nGet call when an error occured during the map loading/rendering process\n\n`onError: function({ message, data, options })`\n\n- `message` - An error message\n- `data` - Data associated with the error\n- `options` - Options parameters that was passed to render function\n\n**onSessionExpired(error)**\n\nGet call when session in the map is expired\n\n### Rotate the map\n\n```js\n<FloorMapComponent\n  // ...\n  initialPolarAngle={0} // Vetical rotation\n  initialAzimuthAngle={90} // Horizontal rotation\n  initialFitContent={{ padding: 50 }}\n  maxPolarAngle={45}\n  maxAzimuthAngle={45}\n/>\n```\n\n### Desk Layout\n\n- `deskLayout` - Show/Hide desk layout\n- `deskInteractable` - Enable interaction on Desk and Chair\n\nThese properties will get overridden from `configureStyle`\n\n```js\n<FloorMapComponent\n  // ...\n  deskLayout={true}\n  deskInteractable={true}\n/>\n```\n\n### Default Map Appearance\n\n```js\n<FloorMapComponent\n  // ...\n  mapAppearance={{\n    mapIcons: false, // disable defatch map icons\n    mapColor: false, // disable default map color\n    roomNumbers: false, // disable room numbers\n  }}\n/>\n```\n\n### Styling\n\nWe provide simple way to make a selection and highlight styling to spaces by passing:\n\n- `selectedSpaces` - Array of uuid of space (or space object) you want to style as selection\n- `selectionColor` - Color to use style when space is in selection state (`selectedSpaces`)\n- `highlightedSpaces` - Array of uuid of space (or space object) you want to style as highlight (we use this for hover effect)\n- `highlightColor` - Color to use style when space is in selection state (`highlightedSpaces`)\n\nThe different between `selection` and `highlight` is selection will have more priority then highlight, Thus space that got selection won't get highlight style even it is part of `highlightedSpaces`\n\n```js\n<FloorMapComponent\n  // ...\n  selectedSpaces={[uuid1, uuid2]}\n  highlightedSpaces={[uuid3]}\n  selectionColor=\"#acc3fe\"\n  highlightColor=\"#ffffff\"\n/>\n```\n\n###### Example\n\n```js\nclass MyMap extends React.Component {\n  state = { selected: [] }\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        selectedSpaces={this.state.selected}\n        selectionColor=\"#acc3fe\"\n        onClickSpace={({ data }) => {\n          if (data) {\n            this.setState({ selected: [data.uuid] })\n          } else {\n            // No data means click outside any space\n            this.setState({ selected: [] })\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\n### Advanced Styling\n\n#### ConfigureStyle\n\nIn case you want to take more control of styling or configure each space (eg. visible, interactable). You can use `configureStyle` props to config each space in the Map.\n\nFor supported properties, please refer to [Floormap SDK's styling](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk#styling)\n\n```js\n<FloorMapComponent\n  // ...\n  configureStyle={space => {\n    // Hide all DESK and CHIAR\n    if (space.type === 'object') {\n      return { visible: fales }\n    }\n\n    // All work type will be #f0f0ff\n    if (space.programType === 'WORK') {\n      return {\n        color: '#f0f0ff',\n        interactable: true,\n      }\n    }\n\n    // otherwise set color to #d0d0d0\n    // and set interactable to false\n    return {\n      color: '#d0d0d0',\n      interactable: false,\n    }\n  }}\n/>\n```\n\n`configureStyle` will get called everytime when to map need to style a space or you can force the map to re-configure space by call `invalidate(space?: Space[]|UUID[])` on FloorMap Instance\n\n###### example\n\nCombine `configureStyle` and `invalidate` to highlight space\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  state = { selectedUuid: undefined }\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        onClickSpace={({ data }) => {\n          if (!data) {\n            return\n          }\n          const currentSelection = this.state.selectedUuid\n          const newSelection = data.uuid\n          this.setState({ selectedUuid: newSelection })\n\n          // Reload 2 space the previous one and new one\n          this.floormapRef.current.invalidate([newSelection, currentSelection])\n        }}\n        configureStyle={space => {\n          if (this.state.selectedUuid === space.uuid) {\n            return {\n              color: 'red',\n            }\n          } else {\n            return { color: '#f0f0f0' }\n          }\n        }}\n      />\n    )\n  }\n}\n```\n\nTo prevent `configureStyle` get called for every spaces, you can pass array of spaces/uuid to `configureStyle` to reload only specific spaces.\n\n#### Overriding Style using ApplyStyle\n\nTo override the style from `configureStyle`, We can `applyStyle`, `revertStyle`, and `resetStyle` functions from the FloormapSDK instance\n\n```js\nconst Map = () => {\n  const floorMapRef = React.createRef()\n\n  return (\n    <FloorMapComponent\n      onClickSpace={({ data }) => {\n        this.floorMap.current?.applyStyle({\n          uuid: data.uuid,\n          style: {\n            color: 'red',\n          },\n        })\n      }}\n      configureStyle={() => {\n        // Every spaces will be white\n        return { color: 'white' }\n      }}\n    />\n  )\n}\n```\n\n### Access Floormap SDK Instance\n\nReact Floormap is a wrapper on top of the FloorMap SDK, simplify the API, and makes it easy to use on React application.\n\nTo use functions inside Floormap SDK such as `applyStyle`, `addObject`, controlling the camera - You can access to the FloormapSDK instance by passing `ref` to `floorMapRef`\n\n```js\nclass MyMap extends React.Component {\n  floorMapRef = React.createRef()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        floorMapRef={this.floorMapRef}\n        didRender={space => {\n          const floorMap = this.floorMapRef.current\n\n          floormap.fitContent()\n        }}\n      />\n    )\n  }\n}\n```\n\nSee more on [Floormap SDK Documentation](https://github.com/WeConnect/floormap-monorepo/tree/v2/packages/floormap-sdk)\n\n### Extension Support\n\nRegister extensions to the floormap, passing array of extension instances as a props to the component.\n\n```js\nimport { OccupancyExtension } from '@wework/floormap-extensions'\n\nclass MyMap extends React.Component {\n  occupancyExtension = new OccupancyExtension()\n\n  render() {\n    return (\n      <FloorMapComponent\n        // ...\n        extensions={[this.occupancyExtension]}\n      />\n    )\n  }\n}\n```\n\n---\n\n## Development\n\n```js\ngit clone git@github.com:WeConnect/react-floormap.git\ncd react-floormap\n\nyarn\nyarn dev\n```\n\n## Demo\n\n```js\nyarn start:demo\n```\n","readmeFilename":"README.md","description":"## React FloorMap Component","_id":"@wework/react-floormap@3.17.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-MVio65/XnLXFJVEg3Zy6ozPTYVlmcqAPrbjtDJaOAf6erEPidcmm0kWm77BLguWKfe48J9t25sHe3+yMI9RzUQ==","shasum":"a58d7a040cc7c36e63cfa0bf46d471b9c8d82596","tarball":"https://registry.npmjs.org/@wework/react-floormap/-/react-floormap-3.17.0.tgz","fileCount":16,"unpackedSize":306798,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpsJr3wVWPzCQo1xW9c1NjS20edC/aPyeNSp3vXsCZIAiEAgk6j2GEWmWPofeu57lRQFtmzUDbfVf46MPO79ObLV6g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvXsOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8iRAAijfzpz7rpkEZypnSjafPuxiMXxdqsNxUZY8Du8KQxEM8Fvq4\r\neByecrDDcMN3jAq+820MyTfQ2/Hew7M82w+r1EPtz/Lh6I4j+XBVExZdtpQd\r\n3xYNxY2kLrXaERpGsmXtiepSu36hd+rgT2VYAgi47KHW580GG56f0f1XNDKr\r\nLeEMbiFVgSR56ZNY/K67X9tEuvHQWDPDicJ6P9FIyLNqQ1GvKAl3KjkYh6Wr\r\nKPr5xrvDJ+PnD2Etmt+B+7kxhuP9dy9uQC+YQPU2vcUNpn8QuqnEOV78f3ic\r\nmW39EQ4TAk6xltev4N8dBhe3wy+FXIT3B3bl0/YRby5PRiZJYfivhe6kYKh1\r\nUKc2VRXUqpaUlYVpuba5BOG0zT8f25QWGOmjoZ+C2ufgi+kGgij30shNgxlw\r\nAvq/EEs3zS2g7iHnCCXggd3pKq0k4V3ZMc8cAhszH91wMahiYZ/TtkCioz3W\r\nGulUvarvQtsCvV2LrrL/EFvsloV1bIG9N+jC9bACSx27Z0kUuO6Rk1X+S53R\r\nDiGdYkzAqzIOuzNWrbNaQEuY02Ef5LngpOTrl9J/Q8AJSQokhi6TS/fvHzYC\r\nu7F/35LJwnWLYgKKQySsMZj8bWAOKSkaMYrR76Cx6vJVRfTbJyTCtD1iShat\r\n+wXvjtTVTwI7nv20OCM8Hj21M3NkcyZURao=\r\n=GAO+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"acartmell@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-floormap_3.17.0_1673362190358_0.7299446924535227"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2019-03-01T03:28:10.235Z","0.0.1":"2019-03-01T03:28:10.420Z","modified":"2024-04-22T20:54:18.643Z","0.0.2":"2019-03-01T07:45:02.532Z","0.0.3-dev.1":"2019-03-05T08:28:28.321Z","0.0.3-dev.2":"2019-03-05T08:53:39.236Z","0.0.3-dev.3":"2019-03-06T03:04:15.491Z","0.0.3-dev.5":"2019-03-06T08:32:09.054Z","0.0.3-dev.6":"2019-03-07T02:24:13.654Z","0.0.3-dev.7":"2019-03-07T06:22:54.274Z","0.0.1-rc8":"2019-03-07T07:31:36.924Z","0.0.3-rc8":"2019-03-07T07:47:38.193Z","0.0.3-dev.8":"2019-03-07T07:48:26.319Z","0.0.3-dev.9":"2019-03-07T14:13:39.272Z","0.0.4-rc1":"2019-03-07T15:05:11.489Z","0.0.4-rc3":"2019-03-08T04:33:45.107Z","0.0.4-rc4":"2019-03-08T06:48:10.980Z","0.0.4-rc5":"2019-03-08T10:23:53.883Z","0.0.4-rc6":"2019-03-08T10:58:59.592Z","0.0.4-rc7":"2019-03-08T12:03:29.443Z","0.0.4-rc8":"2019-03-08T12:28:30.214Z","0.0.4-rc9":"2019-03-11T22:03:32.204Z","0.0.4-rc10":"2019-03-12T00:02:32.520Z","0.0.4-rc11":"2019-03-12T00:27:30.824Z","0.0.4-rc12":"2019-03-12T01:05:28.891Z","0.0.4-rc13":"2019-03-12T01:26:51.015Z","0.0.4-rc14":"2019-03-12T02:21:11.857Z","0.0.4-rc15":"2019-03-12T19:00:15.908Z","0.0.4-rc16":"2019-03-12T19:16:42.430Z","0.0.4-rc17":"2019-03-12T22:26:46.802Z","0.0.4-rc18":"2019-03-13T01:57:31.601Z","0.0.4-rc19":"2019-03-14T06:17:49.963Z","0.0.4-rc20":"2019-03-14T06:30:30.179Z","0.0.4-rc21":"2019-03-14T16:24:36.262Z","0.0.4-rc22":"2019-03-14T17:26:13.636Z","0.0.4-rc23":"2019-03-14T17:32:19.303Z","0.0.4-rc26":"2019-03-14T20:59:14.688Z","0.0.4-rc27":"2019-03-14T21:14:23.061Z","0.0.4-rc29":"2019-03-14T23:29:44.325Z","0.0.4-rc30":"2019-03-14T23:41:54.306Z","0.0.4-rc31":"2019-03-15T00:09:15.100Z","0.0.4-rc32":"2019-03-15T00:36:01.273Z","1.0.0":"2019-03-15T00:43:13.245Z","1.0.1-rc1":"2019-03-15T21:38:40.330Z","1.0.1":"2019-03-15T22:02:25.311Z","1.0.2-rc1":"2019-03-18T21:04:21.095Z","1.0.2":"2019-03-18T21:13:01.755Z","1.0.3-rc1":"2019-03-18T21:16:36.539Z","1.0.3":"2019-03-18T21:27:11.734Z","1.0.4-rc1":"2019-03-20T17:59:23.386Z","1.0.5-dev1":"2019-03-20T19:10:55.662Z","1.0.5-dev2":"2019-03-20T19:12:56.261Z","1.0.5-dev3":"2019-03-20T21:22:42.391Z","1.0.5-dev.4":"2019-03-21T13:43:32.466Z","1.0.5-dev.6":"2019-03-21T15:20:33.210Z","1.0.5-dev.7":"2019-03-21T16:18:00.835Z","1.0.5-dev.8":"2019-03-21T16:50:48.812Z","1.0.5-rc.2":"2019-03-25T03:02:31.054Z","1.0.5":"2019-03-25T03:17:50.984Z","1.0.6-dev.1":"2019-03-26T04:19:41.229Z","1.0.6-dev.2":"2019-03-26T05:14:04.693Z","1.0.6-rc.1":"2019-03-26T07:33:39.782Z","1.0.6-rc.2":"2019-03-26T07:39:21.546Z","1.0.6-rc.3":"2019-03-27T08:32:47.779Z","1.0.6":"2019-03-28T01:36:04.780Z","1.0.7-rc1":"2019-03-28T04:43:40.283Z","1.0.7-rc4":"2019-04-02T08:51:04.764Z","1.0.7":"2019-04-02T09:36:04.621Z","1.0.8-rc1":"2019-04-02T10:31:00.492Z","1.0.8":"2019-04-02T10:35:42.678Z","1.0.9-rc1":"2019-04-04T11:00:11.358Z","1.0.9":"2019-04-04T11:01:40.165Z","1.1.0-rc1":"2019-04-05T10:23:36.438Z","1.1.0-rc2":"2019-04-08T01:48:27.727Z","1.1.0-rc3":"2019-04-08T02:37:14.959Z","1.1.0-rc4":"2019-04-08T04:02:28.882Z","1.1.0-rc5":"2019-04-08T07:42:07.243Z","1.1.0-rc6":"2019-04-08T08:57:13.756Z","1.1.0-rc8":"2019-04-08T10:15:13.605Z","1.1.0-rc9":"2019-04-08T10:26:08.654Z","1.1.0-dev1":"2019-04-08T15:59:29.412Z","1.1.0-dev2":"2019-04-08T16:10:04.157Z","1.1.0-dev3":"2019-04-08T16:13:36.816Z","1.1.0-dev4":"2019-04-08T16:25:05.159Z","1.0.10-dev1":"2019-04-08T16:50:06.448Z","1.0.10-dev5":"2019-04-09T01:34:50.108Z","1.0.11-rc1":"2019-04-09T02:04:19.090Z","1.0.11":"2019-04-09T02:04:59.197Z","1.0.12-rc1":"2019-04-09T07:04:27.878Z","1.0.12":"2019-04-09T07:20:22.182Z","1.1.0-rc10":"2019-04-09T09:15:06.927Z","1.1.0-rc11":"2019-04-09T09:32:26.713Z","1.1.0-rc12":"2019-04-09T10:00:17.547Z","1.1.0-rc13":"2019-04-09T10:52:46.726Z","1.0.13-rc1":"2019-04-10T06:47:30.308Z","1.0.13":"2019-04-10T06:48:43.645Z","1.1.0-rc14":"2019-04-10T06:55:02.677Z","1.1.0-rc15":"2019-04-10T08:55:36.362Z","1.1.0-rc16":"2019-04-10T09:56:45.150Z","1.1.1-test1":"2019-04-10T10:53:23.886Z","1.1.0-rc17":"2019-04-11T04:29:53.114Z","1.1.0-rc18":"2019-04-12T02:56:39.148Z","1.0.14-rc1":"2019-04-12T05:03:14.844Z","1.1.0-rc19":"2019-04-12T06:25:19.212Z","1.0.14-rc2":"2019-04-12T06:46:14.704Z","1.0.14-rc3":"2019-04-12T07:10:56.683Z","1.0.14-rc4":"2019-04-12T08:00:46.216Z","1.0.14-rc5":"2019-04-12T09:20:41.856Z","1.0.14":"2019-04-12T09:24:07.678Z","1.1.0-rc20":"2019-04-15T02:12:02.288Z","1.1.0-rc22":"2019-04-15T03:19:12.339Z","1.0.15-rc1":"2019-04-15T06:41:53.294Z","1.0.15-rc2":"2019-04-15T07:12:30.440Z","1.1.0-rc23":"2019-04-15T07:15:05.524Z","1.0.15":"2019-04-15T07:32:00.911Z","1.1.0-rc24":"2019-04-17T05:32:59.510Z","1.1.1-dev-lerna.1":"2019-04-18T09:07:20.112Z","1.1.0-rc25":"2019-04-22T02:11:35.463Z","1.1.0-rc26":"2019-04-22T04:05:26.005Z","1.1.0-rc27":"2019-04-22T04:50:19.311Z","1.1.0-rc29":"2019-04-22T10:26:43.035Z","1.1.0-rc30":"2019-04-22T10:32:08.915Z","1.1.0-rc31":"2019-04-23T09:29:03.984Z","1.0.16-rc1":"2019-04-23T10:21:27.483Z","1.0.16":"2019-04-23T10:43:37.005Z","1.1.0-rc32":"2019-04-24T06:12:59.278Z","1.1.0-rc33":"2019-04-24T09:08:09.431Z","1.1.0-rc34":"2019-04-25T02:10:58.338Z","1.1.0-rc35":"2019-04-25T07:48:30.738Z","1.1.0-rc36":"2019-04-25T15:17:05.261Z","1.1.0-rc37":"2019-04-26T04:33:55.245Z","1.1.0-rc38":"2019-04-26T09:20:57.419Z","1.1.0-rc39":"2019-04-29T03:44:58.238Z","1.1.0-rc40":"2019-04-29T08:08:27.852Z","1.1.0":"2019-04-30T02:40:05.175Z","1.1.1-dev-lerna.2":"2019-05-07T04:27:56.595Z","1.1.1-rc-lerna.20":"2019-05-13T11:11:46.697Z","1.1.1-rc-lerna.21":"2019-05-13T11:27:58.714Z","1.1.1-rc-lerna.22":"2019-05-16T07:33:59.919Z","1.1.1-rc-lerna.23":"2019-05-17T08:32:08.347Z","1.1.1-rc-lerna.25":"2019-05-22T02:19:18.328Z","1.1.1-rc-lerna.26":"2019-05-22T03:26:53.465Z","1.1.1-rc-lerna.28":"2019-05-22T05:19:53.897Z","1.1.1-rc-lerna.29":"2019-05-22T05:32:27.452Z","1.1.1-rc.30":"2019-05-22T07:05:34.329Z","1.1.1-next.34":"2019-05-24T05:39:56.871Z","1.1.1-next.35":"2019-05-30T09:03:53.667Z","1.1.1-next.36":"2019-05-30T09:23:42.590Z","1.1.1-next.37":"2019-05-31T10:50:58.834Z","1.1.1-next.38":"2019-06-04T10:50:22.060Z","1.1.1-next.39":"2019-06-05T10:53:30.864Z","1.1.1-rc.1":"2019-06-07T07:48:34.254Z","1.1.1":"2019-06-07T07:50:22.116Z","1.1.2-next.40":"2019-06-10T01:36:41.648Z","1.1.2-next.44":"2019-06-10T06:08:52.620Z","1.1.2-next.45":"2019-06-11T11:32:59.644Z","1.1.2-next.46":"2019-06-12T07:11:55.474Z","1.1.2-next.47":"2019-06-14T05:24:03.576Z","1.1.2-next.48":"2019-06-14T06:15:10.340Z","1.1.3":"2019-06-14T07:05:15.029Z","1.1.4-next.0":"2019-06-17T07:00:40.037Z","1.1.4-next.1":"2019-06-18T03:15:37.187Z","1.1.4-ss.2":"2019-06-19T03:21:13.279Z","1.1.4-ss.3":"2019-06-19T04:00:22.932Z","1.1.4-ss.4":"2019-06-19T04:07:53.573Z","1.1.4-ss.5":"2019-06-19T04:12:59.773Z","1.1.4-ss.6":"2019-06-19T04:38:19.757Z","1.1.4-next.2":"2019-06-19T05:02:44.116Z","1.1.4-next.3":"2019-06-19T05:23:45.750Z","1.1.4":"2019-06-19T06:50:56.898Z","1.1.4-rc.5":"2019-06-19T09:33:14.029Z","1.1.4-rc.6":"2019-06-19T09:35:24.966Z","1.1.5":"2019-06-20T02:19:31.629Z","1.1.4-rc.8":"2019-06-20T09:14:23.587Z","1.1.4-next.14":"2019-06-21T02:18:09.954Z","1.1.4-rc.9":"2019-06-21T04:16:25.631Z","1.1.4-rc.10":"2019-06-21T06:57:04.470Z","1.1.4-rc.13":"2019-06-21T08:07:34.983Z","1.1.6":"2019-06-24T04:47:58.456Z","1.1.4-rc.20":"2019-06-27T04:15:53.774Z","1.1.4-rc.22":"2019-06-27T04:46:53.454Z","1.1.7":"2019-06-27T05:18:46.758Z","1.1.8-rc.5":"2019-07-11T04:06:56.579Z","1.1.8-rc.6":"2019-07-11T05:09:06.636Z","1.1.8-rc.7":"2019-07-11T08:35:31.739Z","1.1.8":"2019-07-13T08:04:03.855Z","1.1.8-rc.9":"2019-07-16T06:50:25.302Z","1.1.9-rc.2":"2019-07-18T08:17:46.615Z","1.1.9":"2019-07-18T08:44:47.849Z","1.1.10-rc.1":"2019-07-30T04:26:00.725Z","1.1.10":"2019-07-30T04:41:38.177Z","1.1.10-rc.3":"2019-07-30T05:57:23.396Z","1.1.10-rc.6":"2019-08-01T12:01:48.815Z","1.1.11":"2019-08-01T12:38:44.286Z","1.1.12-rc.0":"2019-08-01T12:46:13.794Z","1.1.12":"2019-08-08T10:43:19.224Z","1.1.12-rc.3":"2019-08-15T07:47:16.721Z","1.1.12-rc.4":"2019-08-15T14:27:18.200Z","1.1.13":"2019-08-16T10:17:55.106Z","1.1.12-rc.8":"2019-08-20T08:27:38.436Z","1.1.14-rc.4":"2019-08-22T11:33:51.155Z","1.1.14":"2019-08-22T11:40:35.651Z","1.1.15-rc.1":"2019-09-03T11:11:15.782Z","1.1.15-rc.2":"2019-09-05T01:56:48.963Z","1.1.15":"2019-09-05T06:55:05.811Z","1.1.15-rc.4":"2019-09-12T03:47:24.435Z","1.1.16-rc.13":"2019-09-30T05:51:38.496Z","1.2.0":"2019-09-30T07:50:10.407Z","1.2.1-rc.0":"2019-10-01T05:30:38.528Z","1.2.1-next.2":"2019-10-01T07:56:46.271Z","1.2.1-next.3":"2019-10-01T09:59:25.710Z","1.2.1":"2019-10-02T09:55:01.096Z","1.2.1-rc.6":"2019-10-02T11:54:06.125Z","1.2.1-rc.7":"2019-10-02T12:15:30.451Z","1.2.1-rc.8":"2019-10-03T02:28:38.712Z","1.2.2":"2019-10-03T02:49:07.885Z","1.2.1-rc.12":"2019-10-08T06:50:39.579Z","1.2.3-rc.3":"2019-10-08T10:42:51.865Z","1.2.3":"2019-10-08T10:44:22.129Z","1.2.3-rc.2":"2019-10-08T10:44:41.678Z","1.2.4-rc.0":"2019-10-21T08:49:58.866Z","1.2.4-rc.1":"2019-10-22T05:21:43.527Z","1.2.4-rc.5":"2019-10-29T09:47:40.373Z","1.2.4":"2019-10-30T06:57:03.512Z","1.3.0":"2019-11-04T09:52:00.877Z","1.3.1-rc.8":"2019-11-13T08:14:49.607Z","1.3.1-rc.9":"2019-11-13T08:32:05.276Z","1.3.1-rc.10":"2019-11-13T08:35:53.524Z","1.4.0":"2019-11-13T10:01:37.554Z","1.2.4-tsdx.11":"2019-11-22T06:10:46.293Z","1.2.4-tsdx-2.11":"2019-11-22T07:38:48.158Z","1.4.1-tsdx-2.8":"2019-11-25T02:43:54.114Z","1.4.1-rc.3":"2019-12-02T09:16:40.279Z","1.4.1":"2019-12-02T09:39:23.209Z","1.4.2-rc.0":"2019-12-02T10:38:37.429Z","1.4.2":"2019-12-02T10:40:23.515Z","1.4.3-rc.1":"2019-12-04T06:33:52.699Z","1.4.3":"2019-12-04T06:34:40.879Z","1.4.4-rc.0":"2019-12-04T10:47:46.588Z","1.4.4":"2019-12-05T02:13:13.089Z","1.4.5-rc.9":"2020-01-07T06:24:30.816Z","1.4.5-rc.10":"2020-01-07T07:48:40.368Z","1.4.5-rc.12":"2020-01-09T01:56:33.066Z","1.5.0":"2020-01-09T07:29:02.952Z","1.5.1-rc.0":"2020-01-10T06:16:54.039Z","1.5.1":"2020-01-13T08:01:44.899Z","1.5.2-rc.1":"2020-01-20T08:54:51.413Z","1.5.2":"2020-01-24T03:28:19.342Z","1.5.3-rc.2":"2020-01-30T04:08:46.021Z","1.5.3":"2020-02-05T10:16:26.572Z","1.5.4-rc.2":"2020-02-10T08:26:30.677Z","1.5.4-rc.3":"2020-02-10T09:08:58.547Z","1.5.4-rc.4":"2020-02-12T09:16:04.954Z","1.5.4-rc.5":"2020-02-13T03:06:52.542Z","1.5.4-rc.6":"2020-02-13T04:36:56.598Z","1.6.0":"2020-02-14T03:25:13.475Z","1.6.1-rc.3":"2020-02-18T07:10:11.144Z","1.6.1-rc.4":"2020-02-18T08:33:56.800Z","1.6.1-rc.6":"2020-02-19T07:49:14.316Z","1.6.1-rc.8":"2020-02-25T10:08:59.027Z","1.6.1-rc.9":"2020-02-25T10:51:00.903Z","1.6.1-rc.10":"2020-02-26T07:52:22.037Z","1.6.1-rc.12":"2020-02-26T12:57:17.858Z","1.6.1-rc.13":"2020-02-27T02:56:54.335Z","1.6.1-rc.14":"2020-02-27T05:09:42.585Z","1.6.1-rc.15":"2020-02-27T08:10:35.232Z","1.6.1-rc.16":"2020-02-28T03:33:49.280Z","1.7.0":"2020-02-28T03:37:39.216Z","1.7.1-rc.0":"2020-03-06T06:42:33.618Z","1.7.1":"2020-03-06T06:51:50.798Z","1.7.2-rc.0":"2020-03-08T10:02:59.849Z","1.7.2-rc.1":"2020-03-09T06:03:06.749Z","1.7.2":"2020-03-13T01:18:28.095Z","1.7.3":"2020-03-19T09:29:22.573Z","1.7.3-rc.0":"2020-03-19T09:29:44.117Z","1.7.4-rc.3":"2020-03-24T02:00:34.367Z","1.7.4":"2020-03-25T04:40:03.277Z","1.7.5-rc.1":"2020-03-27T09:21:32.501Z","1.7.5-rc.2":"2020-03-27T10:51:46.776Z","1.8.0":"2020-03-27T15:12:09.819Z","1.8.1":"2020-03-31T04:32:29.378Z","1.8.1-rc.1":"2020-03-31T04:33:08.306Z","1.8.2-lodash-size.2":"2020-03-31T07:07:44.877Z","1.8.2-rc.4":"2020-04-01T04:15:38.911Z","1.8.2-lodash-size.4":"2020-04-01T04:23:46.508Z","1.8.2":"2020-04-01T04:34:42.843Z","1.8.3-rc.0":"2020-04-02T07:55:13.422Z","1.8.3":"2020-04-02T10:14:59.478Z","1.8.4-rc.2":"2020-04-09T18:23:34.858Z","1.8.4-rc.3":"2020-04-09T18:54:02.254Z","1.8.4":"2020-04-13T13:03:57.751Z","1.8.5-rc.0":"2020-04-15T01:46:55.239Z","1.8.5":"2020-04-15T01:57:27.954Z","1.8.6-rc.0":"2020-04-15T02:30:23.105Z","1.8.6":"2020-04-15T02:32:37.078Z","1.8.7-v2.65":"2020-08-05T03:05:49.331Z","1.8.7-v2.67":"2020-08-06T06:06:39.132Z","1.8.7-v2.69":"2020-08-11T14:48:34.750Z","1.8.7-v2.70":"2020-08-13T03:47:22.626Z","1.8.7-v2.71":"2020-08-17T09:56:06.984Z","1.8.7-v2.73":"2020-08-18T03:44:24.081Z","1.20.1-v2.429":"2020-08-21T02:49:33.632Z","1.20.1-v2.434":"2020-08-24T10:25:46.481Z","1.8.7-rc.35":"2020-08-25T08:29:36.369Z","1.8.7":"2020-08-25T08:33:38.851Z","1.20.1-v2.436":"2020-08-26T06:49:37.955Z","2.0.1-v2.446":"2020-08-28T08:29:54.400Z","2.0.1-v2.450":"2020-08-28T12:24:35.885Z","2.0.1-v2.451":"2020-08-28T12:57:37.475Z","2.0.1-v2.452":"2020-08-28T13:20:10.587Z","2.0.1-v2.454":"2020-08-28T14:08:04.369Z","2.0.1-v2.455":"2020-08-28T14:48:36.014Z","2.0.1-v2.456":"2020-08-31T10:32:41.918Z","2.0.1-v2.457":"2020-08-31T21:47:26.402Z","2.0.1-v2.458":"2020-09-02T12:50:38.803Z","2.0.1-v2.459":"2020-09-02T15:34:04.953Z","2.0.1-v2.460":"2020-09-02T17:08:47.373Z","2.1.0":"2020-09-03T04:44:44.504Z","2.1.1":"2020-09-08T10:14:02.670Z","2.1.2":"2020-09-16T09:56:26.349Z","2.1.3":"2020-09-17T09:47:56.599Z","2.2.0":"2020-09-22T09:00:53.885Z","2.3.0":"2020-09-23T12:08:46.360Z","2.3.1":"2020-09-23T18:27:26.977Z","1.8.8-rc.9":"2020-10-26T07:45:19.946Z","2.5.1-rc.5":"2020-11-17T05:15:54.811Z","2.6.2-rc.0":"2020-12-10T05:46:04.042Z","2.5.1-rc.34":"2021-01-21T13:45:28.106Z","2.5.1-rc.59":"2021-03-15T10:39:41.545Z","2.9.0":"2021-04-12T06:59:46.992Z","2.12.0":"2021-06-16T09:38:14.302Z","2.12.3":"2021-06-25T08:31:04.948Z","2.16.0":"2021-09-21T16:12:22.619Z","2.22.0":"2021-11-08T13:14:15.125Z","2.25.2":"2021-11-12T14:28:25.389Z","2.25.5":"2021-11-19T04:13:14.613Z","2.26.0":"2021-11-24T09:08:55.538Z","2.27.0":"2021-11-30T07:03:52.234Z","2.28.0":"2021-12-02T15:31:38.770Z","2.30.1-rc.2":"2022-01-12T03:19:22.929Z","2.30.1":"2022-01-12T03:55:36.392Z","2.30.2":"2022-01-12T07:39:39.044Z","2.30.5":"2022-01-20T10:25:51.886Z","2.30.6":"2022-01-25T05:06:24.549Z","2.30.10":"2022-01-28T15:46:24.003Z","2.30.11":"2022-02-04T09:04:12.144Z","3.0.0":"2022-02-09T10:24:12.058Z","3.0.1":"2022-02-11T09:21:22.206Z","3.1.0":"2022-02-14T09:48:09.295Z","3.1.1":"2022-02-16T08:43:27.461Z","3.1.2":"2022-02-17T09:25:27.557Z","3.1.10":"2022-02-25T07:53:29.355Z","3.2.0":"2022-02-25T10:58:29.864Z","3.2.1":"2022-02-28T14:15:10.493Z","3.2.3":"2022-03-04T08:49:03.334Z","3.2.4":"2022-03-07T10:56:45.429Z","3.4.0":"2022-04-01T09:14:54.359Z","3.7.1":"2022-06-01T06:17:46.375Z","3.7.3":"2022-06-15T08:56:59.011Z","3.7.5":"2022-06-22T10:25:08.039Z","3.7.6":"2022-06-22T10:54:27.751Z","3.7.7":"2022-07-07T10:01:45.980Z","3.13.2":"2022-11-07T03:10:03.438Z","3.14.0":"2022-11-17T07:40:30.804Z","3.17.0":"2023-01-10T14:49:50.508Z"},"maintainers":[{"email":"support@npmjs.com","name":"npm-support"}],"description":"React FloorMap Component (Powered by FloorMap-SDK)  - By Location Based Experience","readme":"","readmeFilename":""}