├── example
└── src
│ ├── .gitignore
│ ├── index.html
│ ├── example.js
│ └── example.css
├── now.json
├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── .circleci
└── config.yml
├── gulpfile.js
├── package.json
├── src
└── ReactEditableSvgLabel.js
├── rollup.config.js
├── README.md
└── dist
└── react-editable-svg-label.js
/example/src/.gitignore:
--------------------------------------------------------------------------------
1 | ## This file is here to ensure it is included in the gh-pages branch,
2 | ## when `gulp deploy` is used to push updates to the demo site.
3 |
4 | # Dependency directory
5 | node_modules
6 |
--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": 2,
3 | "name": "react-editable-svg-label",
4 | "builds": [{ "src": "package.json", "use": "@now/static-build" }],
5 | "routes": [
6 | { "src": "^/dist/(.*)", "dest": "/dist/$1" },
7 | { "src": "^/(.*)", "dest": "/example/$1" }
8 | ],
9 | "public": true
10 | }
11 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs
2 | # editorconfig.org
3 | root = true
4 |
5 | [*]
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = false
9 | insert_final_newline = true
10 | indent_style = tab
11 |
12 | [*.json]
13 | indent_style = space
14 | indent_size = 2
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Coverage tools
11 | lib-cov
12 | coverage
13 | coverage.html
14 | .cover*
15 |
16 | # Dependency directory
17 | node_modules
18 |
19 | # Example build directory
20 | example/dist
21 | .publish
22 |
23 | # Editor and other tmp files
24 | *.swp
25 | *.un~
26 | *.iml
27 | *.ipr
28 | *.iws
29 | *.sublime-*
30 | .idea/
31 | *.DS_Store
32 |
33 | lib
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ## 2.0.3 – Sep 3, 2019
4 |
5 | - Update build dependencies.
6 |
7 | ## 2.0.2 – Jul 1, 2019
8 |
9 | - Update build dependencies.
10 |
11 | ## 2.0.1 – Jun 1, 2019
12 |
13 | - Update build dependencies.
14 |
15 | ## 2.0.0 – Jan 5, 2019
16 |
17 | - BREAKING CHANGE: Drop support for React 15.
18 | - Update for React 16 and react-portal 4.2.
19 |
20 | ## 1.1.1 – Mar 1, 2017
21 |
22 | Fix build issue.
23 |
24 | ## 1.1.0 – Mar 1, 2017
25 |
26 | - Update for React 15 and react-portal 3.
27 | - Add `focusOnOpen` option.
28 |
29 | ## 1.0.1 – Aug 26, 2016
30 |
31 | - Fix `propTypes`.
32 | - Fix example.
33 |
--------------------------------------------------------------------------------
/example/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | react-editable-svg-label
4 |
5 |
6 |
7 |
8 |
react-editable-svg-label
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
25 |
34 |
35 | );
36 | }
37 | }
38 |
39 | ReactDOM.render(, document.getElementById('app'));
40 |
--------------------------------------------------------------------------------
/example/src/example.css:
--------------------------------------------------------------------------------
1 | /*
2 | // Examples Stylesheet
3 | // -------------------
4 | */
5 |
6 | body {
7 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
8 | font-size: 14px;
9 | color: #333;
10 | margin: 0;
11 | padding: 0;
12 | }
13 |
14 | a {
15 | color: #08c;
16 | text-decoration: none;
17 | }
18 |
19 | a:hover {
20 | text-decoration: underline;
21 | }
22 |
23 | .container {
24 | margin-left: auto;
25 | margin-right: auto;
26 | max-width: 720px;
27 | padding: 1em;
28 | }
29 |
30 | .footer {
31 | margin-top: 50px;
32 | border-top: 1px solid #eee;
33 | padding: 20px 0;
34 | font-size: 12px;
35 | color: #999;
36 | }
37 |
38 | h1, h2, h3, h4, h5, h6 {
39 | color: #222;
40 | font-weight: 100;
41 | margin: 0.5em 0;
42 | }
43 |
44 | label {
45 | color: #999;
46 | display: inline-block;
47 | font-size: 0.85em;
48 | font-weight: bold;
49 | margin: 1em 0;
50 | text-transform: uppercase;
51 | }
52 |
53 | .hint {
54 | margin: 15px 0;
55 | font-style: italic;
56 | color: #999;
57 | }
58 |
59 |
60 | svg {
61 | position: relative;
62 | }
63 | .tooltip {
64 | display: none;
65 | position: absolute;
66 | left: 0;
67 | top: 0;
68 | width: 350px;
69 | padding: 5px;
70 | font-size: 11px;
71 | text-align: left;
72 | color: rgb(0, 0, 0);
73 | background: rgb(204, 204, 204);
74 | border: 2px solid rgb(153, 153, 153);
75 | border-radius: 5px;
76 | text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
77 | box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px;
78 | }
79 | svg:hover .tooltip {
80 | display: block;
81 | }
82 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-editable-svg-label",
3 | "version": "2.0.3",
4 | "description": "A text element for SVG that you can edit",
5 | "main": "lib/ReactEditableSvgLabel.cjs.js",
6 | "module": "lib/ReactEditableSvgLabel.esm.js",
7 | "browser": "dist/react-editable-svg-label.js",
8 | "author": "Matthew Conlen",
9 | "homepage": "https://github.com/mathisonian/react-editable-svg-label",
10 | "repository": "mathisonian/react-editable-svg-label",
11 | "bugs": {
12 | "url": "https://github.com/mathisonian/react-editable-svg-label/issues"
13 | },
14 | "license": "MIT",
15 | "dependencies": {
16 | "prop-types": "^15.6.2"
17 | },
18 | "devDependencies": {
19 | "@babel/core": "^7.1.6",
20 | "@babel/preset-env": "^7.1.6",
21 | "@babel/preset-react": "^7.0.0",
22 | "acorn": "^7.0.0",
23 | "babel-eslint": "^10.0.1",
24 | "concurrently": "^5.1.0",
25 | "react": "~16.13.1",
26 | "react-dom": "~16.13.0",
27 | "react-portal": "^4.2.0",
28 | "rollup": "^2.18.1",
29 | "rollup-plugin-alias": "^2.0.0",
30 | "rollup-plugin-babel": "^4.0.3",
31 | "rollup-plugin-cleaner": "^1.0.0",
32 | "rollup-plugin-commonjs": "^10.0.1",
33 | "rollup-plugin-cpy": "^2.0.0",
34 | "rollup-plugin-node-resolve": "^5.2.0",
35 | "rollup-plugin-replace": "^2.1.0",
36 | "semistandard": "^14.0.1",
37 | "serve": "^11.0.1",
38 | "systemjs": "^6.0.0"
39 | },
40 | "peerDependencies": {
41 | "react": "^16.0.0-0",
42 | "react-portal": "^4.0.0"
43 | },
44 | "scripts": {
45 | "build": "rollup --config",
46 | "lint": "semistandard",
47 | "lint-fix": "semistandard --fix",
48 | "publish:site": "NODE_ENV=production gulp publish:examples",
49 | "prepare": "npm run build",
50 | "serve": "serve example/dist",
51 | "watch": "rollup --config --watch",
52 | "start": "concurrently \"npm run watch\" \"npm run serve\"",
53 | "test": "echo \"no tests yet\" && exit 0",
54 | "now-build": "npm run build && cd dist && mkdir dist example && mv *.js dist && cp -r ../example/dist/* example/"
55 | },
56 | "files": [
57 | "src/*.js",
58 | "lib/*.js",
59 | "dist/*.js",
60 | "example/src/*.@(css|js|html)"
61 | ],
62 | "babel": {
63 | "presets": [
64 | "@babel/preset-react",
65 | [
66 | "@babel/env",
67 | {
68 | "modules": false
69 | }
70 | ]
71 | ]
72 | },
73 | "semistandard": {
74 | "parser": "babel-eslint",
75 | "ignore": [
76 | "lib/",
77 | "dist/",
78 | "example/dist/*",
79 | ".publish/*"
80 | ]
81 | },
82 | "keywords": [
83 | "react",
84 | "react-component",
85 | "svg",
86 | "label"
87 | ]
88 | }
89 |
--------------------------------------------------------------------------------
/src/ReactEditableSvgLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { PortalWithState } from 'react-portal';
3 | import PropTypes from 'prop-types';
4 |
5 | class ReactEditableSvgLabel extends React.Component {
6 | constructor (props) {
7 | super(props);
8 |
9 | this.state = {
10 | isEditing: false,
11 | labelX: 0,
12 | labelY: 0,
13 | labelWidth: 0,
14 | labelHeight: 0
15 | };
16 |
17 | this.inputRef = React.createRef();
18 | this.labelRef = React.createRef();
19 | this.portalRef = React.createRef();
20 |
21 | this.handleOpen = this.handleOpen.bind(this);
22 | this.toggleEditing = this.toggleEditing.bind(this);
23 | this.handleChangeText = this.handleChangeText.bind(this);
24 | this.updateLabelBounds = this.updateLabelBounds.bind(this);
25 | }
26 |
27 | handleOpen (domNode) {
28 | if (this.props.focusOnOpen) {
29 | this.inputRef.current.focus();
30 | }
31 | }
32 |
33 | toggleEditing () {
34 | const newIsEditing = !this.state.isEditing;
35 | this.setState({ isEditing: newIsEditing });
36 | if (newIsEditing) {
37 | this.portalRef.current.openPortal();
38 | }
39 | }
40 |
41 | handleChangeText (e) {
42 | var text = e.target.value;
43 | this.props.onChange(text);
44 | }
45 |
46 | updateLabelBounds () {
47 | var rect = this.labelRef.current.getBoundingClientRect();
48 | this.setState({
49 | labelX: rect.left,
50 | labelY: rect.top,
51 | labelWidth: rect.width,
52 | labelHeight: rect.height
53 | });
54 | }
55 |
56 | componentDidMount () {
57 | this.updateLabelBounds();
58 | }
59 |
60 | render () {
61 | // Omit onChange, minLabelWidth, and children.
62 | var passThroughProps = Object.assign({}, this.props);
63 | Object.keys(this.constructor.propTypes).forEach(function (key) {
64 | delete passThroughProps[key];
65 | });
66 |
67 | return (
68 |
73 | {({ openPortal, closePortal, isOpen, portal }) => (
74 | <>
75 |
80 | {this.props.children}
81 |
82 | {portal(
83 |
96 | )}
97 |
98 | )}
99 |
100 | );
101 | }
102 | }
103 |
104 | ReactEditableSvgLabel.propTypes = {
105 | onChange: PropTypes.func,
106 | minLabelWidth: PropTypes.number,
107 | focusOnOpen: PropTypes.bool,
108 | children: PropTypes.any
109 | };
110 |
111 | ReactEditableSvgLabel.defaultProps = {
112 | onChange: function () {},
113 | minLabelWidth: 100,
114 | focusOnOpen: true
115 | };
116 |
117 | export default ReactEditableSvgLabel;
118 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import resolve from 'rollup-plugin-node-resolve';
2 | import commonjs from 'rollup-plugin-commonjs';
3 | import babel from 'rollup-plugin-babel';
4 | import alias from 'rollup-plugin-alias';
5 | import copy from 'rollup-plugin-cpy';
6 | import cleaner from 'rollup-plugin-cleaner';
7 | import replace from 'rollup-plugin-replace';
8 | import pkg from './package.json';
9 |
10 | const input = 'src/ReactEditableSvgLabel.js';
11 |
12 | export default [
13 | // UMD.
14 | {
15 | input,
16 | external: ['react', 'react-portal'],
17 | output: {
18 | name: 'ReactEditableSvgLabel',
19 | file: pkg.browser,
20 | format: 'umd',
21 | globals: {
22 | react: 'React',
23 | 'react-portal': 'Portal'
24 | }
25 | },
26 | plugins: [
27 | babel({ exclude: 'node_modules/**' }),
28 | resolve(),
29 | commonjs()
30 | ]
31 | },
32 |
33 | // CommonJS + ES6 module.
34 | {
35 | input,
36 | external: ['react', 'react-portal', 'prop-types'],
37 | output: [
38 | { file: pkg.main, format: 'cjs' },
39 | { file: pkg.module, format: 'es' }
40 | ],
41 | plugins: [
42 | babel()
43 | ]
44 | },
45 |
46 | // Example app using SystemJS.
47 | // {
48 | // input: 'example/src/example.js',
49 | // output: {
50 | // name: 'Example',
51 | // dir: 'example/dist',
52 | // format: 'system',
53 | // sourcemap: true
54 | // },
55 | // experimentalCodeSplitting: true,
56 | // manualChunks: {
57 | // 'dependencies': [
58 | // // Specify filenames for now.
59 | // // https://github.com/rollup/rollup-plugin-node-resolve/issues/164
60 | // 'node_modules/react/react.js',
61 | // 'node_modules/react-dom/index.js',
62 | // 'node_modules/prop-types/index.js'
63 | // ],
64 | // 'react-editable-svg-label': [
65 | // 'src/ReactEditableSvgLabel.js'
66 | // ]
67 | // },
68 | // plugins: [
69 | // babel({ exclude: 'node_modules/**' }),
70 | // alias({
71 | // 'react-editable-svg-label': 'src/ReactEditableSvgLabel.js'
72 | // }),
73 | // commonjs(),
74 | // resolve(),
75 | // copy({
76 | // files: [
77 | // 'example/src/index.html',
78 | // 'example/src/example.css',
79 | // 'node_modules/systemjs/dist/s.js',
80 | // 'node_modules/systemjs/dist/extras/named-register.js'
81 | // ],
82 | // dest: 'example/dist'
83 | // }),
84 | // replace({
85 | // 'process.env.NODE_ENV': JSON.stringify('production')
86 | // }),
87 | // cleaner({
88 | // targets: ['example/dist']
89 | // })
90 | // ]
91 | // }
92 |
93 | // Example app using IIFE.
94 | {
95 | input: 'example/src/example.js',
96 | output: {
97 | name: 'Example',
98 | file: 'example/dist/example.js',
99 | format: 'iife',
100 | sourcemap: true
101 | },
102 | plugins: [
103 | babel({ exclude: 'node_modules/**' }),
104 | alias({
105 | entries: [
106 | { find: 'react-editable-svg-label', replacement: 'src/ReactEditableSvgLabel.js' }
107 | ]
108 | }),
109 | commonjs(),
110 | resolve(),
111 | copy({
112 | files: [
113 | 'example/src/index.html',
114 | 'example/src/example.css'
115 | ],
116 | dest: 'example/dist'
117 | }),
118 | replace({
119 | 'process.env.NODE_ENV': JSON.stringify('development')
120 | }),
121 | cleaner({
122 | targets: ['example/dist']
123 | })
124 | ]
125 | }
126 | ];
127 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-editable-svg-label
2 |
3 | [][npm]
4 | [][react]
5 | [][react-portal]
6 | [][npm]
7 | [][build]
8 | [][prettier]
9 |
10 | [npm]: https://npmjs.com/react-editable-svg-label
11 | [react]: https://github.com/facebook/react/releases
12 | [react-portal]: https://github.com/tajo/react-portal/releases
13 | [build]: https://circleci.com/gh/mathisonian/react-editable-svg-label/tree/master
14 | [prettier]: https://prettier.io/
15 |
16 | A text component for SVG that allows users to edit the contents.
17 |
18 | Live demo: [mathisonian.github.io/react-editable-svg-label](http://mathisonian.github.io/react-editable-svg-label/)
19 |
20 |
21 | ## Installation
22 |
23 | The easiest way to use react-editable-svg-label is to install it from NPM and include it in your own React build process (using [Browserify](http://browserify.org), [Webpack](http://webpack.github.io/), etc).
24 |
25 | You can also use the standalone build by including `dist/react-editable-svg-label.js` in your page. If you use this, make sure you have already included React and react-portal, and they are available as global variables `React` and `Portal`.
26 |
27 | ```
28 | npm install react-portal react-editable-svg-label --save
29 | ```
30 |
31 | Uses `React.Fragment` and requires React 16 or later.
32 |
33 |
34 | ## Usage
35 |
36 | ```js
37 | var React = require('react');
38 | var ReactDOM = require('react-dom');
39 | var ReactEditableSvgLabel = require('react-editable-svg-label');
40 |
41 | var App = React.createClass({
42 |
43 | getInitialState () {
44 | return {
45 | text: 'Click me to change this text!'
46 | }
47 | },
48 |
49 | handleChangeText (newText) {
50 | this.setState({
51 | text: newText
52 | });
53 | },
54 |
55 | render () {
56 | return (
57 |
58 |
63 |
64 | );
65 | }
66 | });
67 |
68 | ReactDOM.render(, document.getElementById('app'));
69 | ```
70 |
71 | ### Properties
72 |
73 | **focusOnOpen**: Give the input focus when it's opened.
74 |
75 | Anything else that is passed as a prop to the editable label will be passed on
76 | to the svg `text` element
77 |
78 |
79 | ## Demo & Examples
80 |
81 |
82 | To build the examples locally, run:
83 |
84 | ```
85 | npm install
86 | npm start
87 | ```
88 |
89 | Then open [`localhost:8000`](http://localhost:8000) in a browser.
90 |
91 |
92 | ## Development (`src`, `lib` and the build process)
93 |
94 | **NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `dist`, which can be included without the need for any build system.
95 |
96 | To build, watch and serve the examples (which will also watch the component source), run `npm start`. If you just want to watch changes to `src` and rebuild `lib`, run `npm run watch` (this is useful if you are working with `npm link`).
97 |
98 |
99 | ## License
100 |
101 | MIT
102 |
103 | Copyright (c) 2016 Matthew Conlen.
104 |
--------------------------------------------------------------------------------
/dist/react-editable-svg-label.js:
--------------------------------------------------------------------------------
1 | (function (global, factory) {
2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-portal')) :
3 | typeof define === 'function' && define.amd ? define(['react', 'react-portal'], factory) :
4 | (global = global || self, global.ReactEditableSvgLabel = factory(global.React, global.Portal));
5 | }(this, function (React, reactPortal) { 'use strict';
6 |
7 | React = React && React.hasOwnProperty('default') ? React['default'] : React;
8 |
9 | function _classCallCheck(instance, Constructor) {
10 | if (!(instance instanceof Constructor)) {
11 | throw new TypeError("Cannot call a class as a function");
12 | }
13 | }
14 |
15 | function _defineProperties(target, props) {
16 | for (var i = 0; i < props.length; i++) {
17 | var descriptor = props[i];
18 | descriptor.enumerable = descriptor.enumerable || false;
19 | descriptor.configurable = true;
20 | if ("value" in descriptor) descriptor.writable = true;
21 | Object.defineProperty(target, descriptor.key, descriptor);
22 | }
23 | }
24 |
25 | function _createClass(Constructor, protoProps, staticProps) {
26 | if (protoProps) _defineProperties(Constructor.prototype, protoProps);
27 | if (staticProps) _defineProperties(Constructor, staticProps);
28 | return Constructor;
29 | }
30 |
31 | function _extends() {
32 | _extends = Object.assign || function (target) {
33 | for (var i = 1; i < arguments.length; i++) {
34 | var source = arguments[i];
35 |
36 | for (var key in source) {
37 | if (Object.prototype.hasOwnProperty.call(source, key)) {
38 | target[key] = source[key];
39 | }
40 | }
41 | }
42 |
43 | return target;
44 | };
45 |
46 | return _extends.apply(this, arguments);
47 | }
48 |
49 | function _inherits(subClass, superClass) {
50 | if (typeof superClass !== "function" && superClass !== null) {
51 | throw new TypeError("Super expression must either be null or a function");
52 | }
53 |
54 | subClass.prototype = Object.create(superClass && superClass.prototype, {
55 | constructor: {
56 | value: subClass,
57 | writable: true,
58 | configurable: true
59 | }
60 | });
61 | if (superClass) _setPrototypeOf(subClass, superClass);
62 | }
63 |
64 | function _getPrototypeOf(o) {
65 | _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
66 | return o.__proto__ || Object.getPrototypeOf(o);
67 | };
68 | return _getPrototypeOf(o);
69 | }
70 |
71 | function _setPrototypeOf(o, p) {
72 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
73 | o.__proto__ = p;
74 | return o;
75 | };
76 |
77 | return _setPrototypeOf(o, p);
78 | }
79 |
80 | function _assertThisInitialized(self) {
81 | if (self === void 0) {
82 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
83 | }
84 |
85 | return self;
86 | }
87 |
88 | function _possibleConstructorReturn(self, call) {
89 | if (call && (typeof call === "object" || typeof call === "function")) {
90 | return call;
91 | }
92 |
93 | return _assertThisInitialized(self);
94 | }
95 |
96 | function unwrapExports (x) {
97 | return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
98 | }
99 |
100 | function createCommonjsModule(fn, module) {
101 | return module = { exports: {} }, fn(module, module.exports), module.exports;
102 | }
103 |
104 | var reactIs_production_min = createCommonjsModule(function (module, exports) {
105 | Object.defineProperty(exports,"__esModule",{value:!0});
106 | var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.memo"):
107 | 60115,r=b?Symbol.for("react.lazy"):60116;function t(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case r:case q:case d:return u}}}function v(a){return t(a)===m}exports.typeOf=t;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;
108 | exports.Fragment=e;exports.Lazy=r;exports.Memo=q;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||"object"===typeof a&&null!==a&&(a.$$typeof===r||a.$$typeof===q||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n)};exports.isAsyncMode=function(a){return v(a)||t(a)===l};exports.isConcurrentMode=v;exports.isContextConsumer=function(a){return t(a)===k};
109 | exports.isContextProvider=function(a){return t(a)===h};exports.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return t(a)===n};exports.isFragment=function(a){return t(a)===e};exports.isLazy=function(a){return t(a)===r};exports.isMemo=function(a){return t(a)===q};exports.isPortal=function(a){return t(a)===d};exports.isProfiler=function(a){return t(a)===g};exports.isStrictMode=function(a){return t(a)===f};
110 | exports.isSuspense=function(a){return t(a)===p};
111 | });
112 |
113 | unwrapExports(reactIs_production_min);
114 | var reactIs_production_min_1 = reactIs_production_min.typeOf;
115 | var reactIs_production_min_2 = reactIs_production_min.AsyncMode;
116 | var reactIs_production_min_3 = reactIs_production_min.ConcurrentMode;
117 | var reactIs_production_min_4 = reactIs_production_min.ContextConsumer;
118 | var reactIs_production_min_5 = reactIs_production_min.ContextProvider;
119 | var reactIs_production_min_6 = reactIs_production_min.Element;
120 | var reactIs_production_min_7 = reactIs_production_min.ForwardRef;
121 | var reactIs_production_min_8 = reactIs_production_min.Fragment;
122 | var reactIs_production_min_9 = reactIs_production_min.Lazy;
123 | var reactIs_production_min_10 = reactIs_production_min.Memo;
124 | var reactIs_production_min_11 = reactIs_production_min.Portal;
125 | var reactIs_production_min_12 = reactIs_production_min.Profiler;
126 | var reactIs_production_min_13 = reactIs_production_min.StrictMode;
127 | var reactIs_production_min_14 = reactIs_production_min.Suspense;
128 | var reactIs_production_min_15 = reactIs_production_min.isValidElementType;
129 | var reactIs_production_min_16 = reactIs_production_min.isAsyncMode;
130 | var reactIs_production_min_17 = reactIs_production_min.isConcurrentMode;
131 | var reactIs_production_min_18 = reactIs_production_min.isContextConsumer;
132 | var reactIs_production_min_19 = reactIs_production_min.isContextProvider;
133 | var reactIs_production_min_20 = reactIs_production_min.isElement;
134 | var reactIs_production_min_21 = reactIs_production_min.isForwardRef;
135 | var reactIs_production_min_22 = reactIs_production_min.isFragment;
136 | var reactIs_production_min_23 = reactIs_production_min.isLazy;
137 | var reactIs_production_min_24 = reactIs_production_min.isMemo;
138 | var reactIs_production_min_25 = reactIs_production_min.isPortal;
139 | var reactIs_production_min_26 = reactIs_production_min.isProfiler;
140 | var reactIs_production_min_27 = reactIs_production_min.isStrictMode;
141 | var reactIs_production_min_28 = reactIs_production_min.isSuspense;
142 |
143 | var reactIs_development = createCommonjsModule(function (module, exports) {
144 |
145 |
146 |
147 | if (process.env.NODE_ENV !== "production") {
148 | (function() {
149 |
150 | Object.defineProperty(exports, '__esModule', { value: true });
151 |
152 | // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
153 | // nor polyfill, then a plain number is used for performance.
154 | var hasSymbol = typeof Symbol === 'function' && Symbol.for;
155 |
156 | var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
157 | var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
158 | var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
159 | var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
160 | var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
161 | var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
162 | var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
163 | var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
164 | var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
165 | var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
166 | var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
167 | var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
168 | var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
169 |
170 | function isValidElementType(type) {
171 | return typeof type === 'string' || typeof type === 'function' ||
172 | // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
173 | type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE);
174 | }
175 |
176 | /**
177 | * Forked from fbjs/warning:
178 | * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
179 | *
180 | * Only change is we use console.warn instead of console.error,
181 | * and do nothing when 'console' is not supported.
182 | * This really simplifies the code.
183 | * ---
184 | * Similar to invariant but only logs a warning if the condition is not met.
185 | * This can be used to log issues in development environments in critical
186 | * paths. Removing the logging code for production environments will keep the
187 | * same logic and follow the same code paths.
188 | */
189 |
190 | var lowPriorityWarning = function () {};
191 |
192 | {
193 | var printWarning = function (format) {
194 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
195 | args[_key - 1] = arguments[_key];
196 | }
197 |
198 | var argIndex = 0;
199 | var message = 'Warning: ' + format.replace(/%s/g, function () {
200 | return args[argIndex++];
201 | });
202 | if (typeof console !== 'undefined') {
203 | console.warn(message);
204 | }
205 | try {
206 | // --- Welcome to debugging React ---
207 | // This error was thrown as a convenience so that you can use this stack
208 | // to find the callsite that caused this warning to fire.
209 | throw new Error(message);
210 | } catch (x) {}
211 | };
212 |
213 | lowPriorityWarning = function (condition, format) {
214 | if (format === undefined) {
215 | throw new Error('`lowPriorityWarning(condition, format, ...args)` requires a warning ' + 'message argument');
216 | }
217 | if (!condition) {
218 | for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
219 | args[_key2 - 2] = arguments[_key2];
220 | }
221 |
222 | printWarning.apply(undefined, [format].concat(args));
223 | }
224 | };
225 | }
226 |
227 | var lowPriorityWarning$1 = lowPriorityWarning;
228 |
229 | function typeOf(object) {
230 | if (typeof object === 'object' && object !== null) {
231 | var $$typeof = object.$$typeof;
232 | switch ($$typeof) {
233 | case REACT_ELEMENT_TYPE:
234 | var type = object.type;
235 |
236 | switch (type) {
237 | case REACT_ASYNC_MODE_TYPE:
238 | case REACT_CONCURRENT_MODE_TYPE:
239 | case REACT_FRAGMENT_TYPE:
240 | case REACT_PROFILER_TYPE:
241 | case REACT_STRICT_MODE_TYPE:
242 | case REACT_SUSPENSE_TYPE:
243 | return type;
244 | default:
245 | var $$typeofType = type && type.$$typeof;
246 |
247 | switch ($$typeofType) {
248 | case REACT_CONTEXT_TYPE:
249 | case REACT_FORWARD_REF_TYPE:
250 | case REACT_PROVIDER_TYPE:
251 | return $$typeofType;
252 | default:
253 | return $$typeof;
254 | }
255 | }
256 | case REACT_LAZY_TYPE:
257 | case REACT_MEMO_TYPE:
258 | case REACT_PORTAL_TYPE:
259 | return $$typeof;
260 | }
261 | }
262 |
263 | return undefined;
264 | }
265 |
266 | // AsyncMode is deprecated along with isAsyncMode
267 | var AsyncMode = REACT_ASYNC_MODE_TYPE;
268 | var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
269 | var ContextConsumer = REACT_CONTEXT_TYPE;
270 | var ContextProvider = REACT_PROVIDER_TYPE;
271 | var Element = REACT_ELEMENT_TYPE;
272 | var ForwardRef = REACT_FORWARD_REF_TYPE;
273 | var Fragment = REACT_FRAGMENT_TYPE;
274 | var Lazy = REACT_LAZY_TYPE;
275 | var Memo = REACT_MEMO_TYPE;
276 | var Portal = REACT_PORTAL_TYPE;
277 | var Profiler = REACT_PROFILER_TYPE;
278 | var StrictMode = REACT_STRICT_MODE_TYPE;
279 | var Suspense = REACT_SUSPENSE_TYPE;
280 |
281 | var hasWarnedAboutDeprecatedIsAsyncMode = false;
282 |
283 | // AsyncMode should be deprecated
284 | function isAsyncMode(object) {
285 | {
286 | if (!hasWarnedAboutDeprecatedIsAsyncMode) {
287 | hasWarnedAboutDeprecatedIsAsyncMode = true;
288 | lowPriorityWarning$1(false, 'The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
289 | }
290 | }
291 | return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
292 | }
293 | function isConcurrentMode(object) {
294 | return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
295 | }
296 | function isContextConsumer(object) {
297 | return typeOf(object) === REACT_CONTEXT_TYPE;
298 | }
299 | function isContextProvider(object) {
300 | return typeOf(object) === REACT_PROVIDER_TYPE;
301 | }
302 | function isElement(object) {
303 | return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
304 | }
305 | function isForwardRef(object) {
306 | return typeOf(object) === REACT_FORWARD_REF_TYPE;
307 | }
308 | function isFragment(object) {
309 | return typeOf(object) === REACT_FRAGMENT_TYPE;
310 | }
311 | function isLazy(object) {
312 | return typeOf(object) === REACT_LAZY_TYPE;
313 | }
314 | function isMemo(object) {
315 | return typeOf(object) === REACT_MEMO_TYPE;
316 | }
317 | function isPortal(object) {
318 | return typeOf(object) === REACT_PORTAL_TYPE;
319 | }
320 | function isProfiler(object) {
321 | return typeOf(object) === REACT_PROFILER_TYPE;
322 | }
323 | function isStrictMode(object) {
324 | return typeOf(object) === REACT_STRICT_MODE_TYPE;
325 | }
326 | function isSuspense(object) {
327 | return typeOf(object) === REACT_SUSPENSE_TYPE;
328 | }
329 |
330 | exports.typeOf = typeOf;
331 | exports.AsyncMode = AsyncMode;
332 | exports.ConcurrentMode = ConcurrentMode;
333 | exports.ContextConsumer = ContextConsumer;
334 | exports.ContextProvider = ContextProvider;
335 | exports.Element = Element;
336 | exports.ForwardRef = ForwardRef;
337 | exports.Fragment = Fragment;
338 | exports.Lazy = Lazy;
339 | exports.Memo = Memo;
340 | exports.Portal = Portal;
341 | exports.Profiler = Profiler;
342 | exports.StrictMode = StrictMode;
343 | exports.Suspense = Suspense;
344 | exports.isValidElementType = isValidElementType;
345 | exports.isAsyncMode = isAsyncMode;
346 | exports.isConcurrentMode = isConcurrentMode;
347 | exports.isContextConsumer = isContextConsumer;
348 | exports.isContextProvider = isContextProvider;
349 | exports.isElement = isElement;
350 | exports.isForwardRef = isForwardRef;
351 | exports.isFragment = isFragment;
352 | exports.isLazy = isLazy;
353 | exports.isMemo = isMemo;
354 | exports.isPortal = isPortal;
355 | exports.isProfiler = isProfiler;
356 | exports.isStrictMode = isStrictMode;
357 | exports.isSuspense = isSuspense;
358 | })();
359 | }
360 | });
361 |
362 | unwrapExports(reactIs_development);
363 | var reactIs_development_1 = reactIs_development.typeOf;
364 | var reactIs_development_2 = reactIs_development.AsyncMode;
365 | var reactIs_development_3 = reactIs_development.ConcurrentMode;
366 | var reactIs_development_4 = reactIs_development.ContextConsumer;
367 | var reactIs_development_5 = reactIs_development.ContextProvider;
368 | var reactIs_development_6 = reactIs_development.Element;
369 | var reactIs_development_7 = reactIs_development.ForwardRef;
370 | var reactIs_development_8 = reactIs_development.Fragment;
371 | var reactIs_development_9 = reactIs_development.Lazy;
372 | var reactIs_development_10 = reactIs_development.Memo;
373 | var reactIs_development_11 = reactIs_development.Portal;
374 | var reactIs_development_12 = reactIs_development.Profiler;
375 | var reactIs_development_13 = reactIs_development.StrictMode;
376 | var reactIs_development_14 = reactIs_development.Suspense;
377 | var reactIs_development_15 = reactIs_development.isValidElementType;
378 | var reactIs_development_16 = reactIs_development.isAsyncMode;
379 | var reactIs_development_17 = reactIs_development.isConcurrentMode;
380 | var reactIs_development_18 = reactIs_development.isContextConsumer;
381 | var reactIs_development_19 = reactIs_development.isContextProvider;
382 | var reactIs_development_20 = reactIs_development.isElement;
383 | var reactIs_development_21 = reactIs_development.isForwardRef;
384 | var reactIs_development_22 = reactIs_development.isFragment;
385 | var reactIs_development_23 = reactIs_development.isLazy;
386 | var reactIs_development_24 = reactIs_development.isMemo;
387 | var reactIs_development_25 = reactIs_development.isPortal;
388 | var reactIs_development_26 = reactIs_development.isProfiler;
389 | var reactIs_development_27 = reactIs_development.isStrictMode;
390 | var reactIs_development_28 = reactIs_development.isSuspense;
391 |
392 | var reactIs = createCommonjsModule(function (module) {
393 |
394 | if (process.env.NODE_ENV === 'production') {
395 | module.exports = reactIs_production_min;
396 | } else {
397 | module.exports = reactIs_development;
398 | }
399 | });
400 |
401 | /*
402 | object-assign
403 | (c) Sindre Sorhus
404 | @license MIT
405 | */
406 | /* eslint-disable no-unused-vars */
407 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
408 | var hasOwnProperty = Object.prototype.hasOwnProperty;
409 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
410 |
411 | function toObject(val) {
412 | if (val === null || val === undefined) {
413 | throw new TypeError('Object.assign cannot be called with null or undefined');
414 | }
415 |
416 | return Object(val);
417 | }
418 |
419 | function shouldUseNative() {
420 | try {
421 | if (!Object.assign) {
422 | return false;
423 | }
424 |
425 | // Detect buggy property enumeration order in older V8 versions.
426 |
427 | // https://bugs.chromium.org/p/v8/issues/detail?id=4118
428 | var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
429 | test1[5] = 'de';
430 | if (Object.getOwnPropertyNames(test1)[0] === '5') {
431 | return false;
432 | }
433 |
434 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
435 | var test2 = {};
436 | for (var i = 0; i < 10; i++) {
437 | test2['_' + String.fromCharCode(i)] = i;
438 | }
439 | var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
440 | return test2[n];
441 | });
442 | if (order2.join('') !== '0123456789') {
443 | return false;
444 | }
445 |
446 | // https://bugs.chromium.org/p/v8/issues/detail?id=3056
447 | var test3 = {};
448 | 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
449 | test3[letter] = letter;
450 | });
451 | if (Object.keys(Object.assign({}, test3)).join('') !==
452 | 'abcdefghijklmnopqrst') {
453 | return false;
454 | }
455 |
456 | return true;
457 | } catch (err) {
458 | // We don't expect any of the above to throw, but better to be safe.
459 | return false;
460 | }
461 | }
462 |
463 | var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
464 | var from;
465 | var to = toObject(target);
466 | var symbols;
467 |
468 | for (var s = 1; s < arguments.length; s++) {
469 | from = Object(arguments[s]);
470 |
471 | for (var key in from) {
472 | if (hasOwnProperty.call(from, key)) {
473 | to[key] = from[key];
474 | }
475 | }
476 |
477 | if (getOwnPropertySymbols) {
478 | symbols = getOwnPropertySymbols(from);
479 | for (var i = 0; i < symbols.length; i++) {
480 | if (propIsEnumerable.call(from, symbols[i])) {
481 | to[symbols[i]] = from[symbols[i]];
482 | }
483 | }
484 | }
485 | }
486 |
487 | return to;
488 | };
489 |
490 | /**
491 | * Copyright (c) 2013-present, Facebook, Inc.
492 | *
493 | * This source code is licensed under the MIT license found in the
494 | * LICENSE file in the root directory of this source tree.
495 | */
496 |
497 | var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
498 |
499 | var ReactPropTypesSecret_1 = ReactPropTypesSecret;
500 |
501 | var printWarning = function() {};
502 |
503 | if (process.env.NODE_ENV !== 'production') {
504 | var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
505 | var loggedTypeFailures = {};
506 | var has = Function.call.bind(Object.prototype.hasOwnProperty);
507 |
508 | printWarning = function(text) {
509 | var message = 'Warning: ' + text;
510 | if (typeof console !== 'undefined') {
511 | console.error(message);
512 | }
513 | try {
514 | // --- Welcome to debugging React ---
515 | // This error was thrown as a convenience so that you can use this stack
516 | // to find the callsite that caused this warning to fire.
517 | throw new Error(message);
518 | } catch (x) {}
519 | };
520 | }
521 |
522 | /**
523 | * Assert that the values match with the type specs.
524 | * Error messages are memorized and will only be shown once.
525 | *
526 | * @param {object} typeSpecs Map of name to a ReactPropType
527 | * @param {object} values Runtime values that need to be type-checked
528 | * @param {string} location e.g. "prop", "context", "child context"
529 | * @param {string} componentName Name of the component for error messages.
530 | * @param {?Function} getStack Returns the component stack.
531 | * @private
532 | */
533 | function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
534 | if (process.env.NODE_ENV !== 'production') {
535 | for (var typeSpecName in typeSpecs) {
536 | if (has(typeSpecs, typeSpecName)) {
537 | var error;
538 | // Prop type validation may throw. In case they do, we don't want to
539 | // fail the render phase where it didn't fail before. So we log it.
540 | // After these have been cleaned up, we'll let them throw.
541 | try {
542 | // This is intentionally an invariant that gets caught. It's the same
543 | // behavior as without this statement except with a better message.
544 | if (typeof typeSpecs[typeSpecName] !== 'function') {
545 | var err = Error(
546 | (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
547 | 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
548 | );
549 | err.name = 'Invariant Violation';
550 | throw err;
551 | }
552 | error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
553 | } catch (ex) {
554 | error = ex;
555 | }
556 | if (error && !(error instanceof Error)) {
557 | printWarning(
558 | (componentName || 'React class') + ': type specification of ' +
559 | location + ' `' + typeSpecName + '` is invalid; the type checker ' +
560 | 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
561 | 'You may have forgotten to pass an argument to the type checker ' +
562 | 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
563 | 'shape all require an argument).'
564 | );
565 | }
566 | if (error instanceof Error && !(error.message in loggedTypeFailures)) {
567 | // Only monitor this failure once because there tends to be a lot of the
568 | // same error.
569 | loggedTypeFailures[error.message] = true;
570 |
571 | var stack = getStack ? getStack() : '';
572 |
573 | printWarning(
574 | 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
575 | );
576 | }
577 | }
578 | }
579 | }
580 | }
581 |
582 | /**
583 | * Resets warning cache when testing.
584 | *
585 | * @private
586 | */
587 | checkPropTypes.resetWarningCache = function() {
588 | if (process.env.NODE_ENV !== 'production') {
589 | loggedTypeFailures = {};
590 | }
591 | };
592 |
593 | var checkPropTypes_1 = checkPropTypes;
594 |
595 | var has$1 = Function.call.bind(Object.prototype.hasOwnProperty);
596 | var printWarning$1 = function() {};
597 |
598 | if (process.env.NODE_ENV !== 'production') {
599 | printWarning$1 = function(text) {
600 | var message = 'Warning: ' + text;
601 | if (typeof console !== 'undefined') {
602 | console.error(message);
603 | }
604 | try {
605 | // --- Welcome to debugging React ---
606 | // This error was thrown as a convenience so that you can use this stack
607 | // to find the callsite that caused this warning to fire.
608 | throw new Error(message);
609 | } catch (x) {}
610 | };
611 | }
612 |
613 | function emptyFunctionThatReturnsNull() {
614 | return null;
615 | }
616 |
617 | var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
618 | /* global Symbol */
619 | var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
620 | var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
621 |
622 | /**
623 | * Returns the iterator method function contained on the iterable object.
624 | *
625 | * Be sure to invoke the function with the iterable as context:
626 | *
627 | * var iteratorFn = getIteratorFn(myIterable);
628 | * if (iteratorFn) {
629 | * var iterator = iteratorFn.call(myIterable);
630 | * ...
631 | * }
632 | *
633 | * @param {?object} maybeIterable
634 | * @return {?function}
635 | */
636 | function getIteratorFn(maybeIterable) {
637 | var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
638 | if (typeof iteratorFn === 'function') {
639 | return iteratorFn;
640 | }
641 | }
642 |
643 | /**
644 | * Collection of methods that allow declaration and validation of props that are
645 | * supplied to React components. Example usage:
646 | *
647 | * var Props = require('ReactPropTypes');
648 | * var MyArticle = React.createClass({
649 | * propTypes: {
650 | * // An optional string prop named "description".
651 | * description: Props.string,
652 | *
653 | * // A required enum prop named "category".
654 | * category: Props.oneOf(['News','Photos']).isRequired,
655 | *
656 | * // A prop named "dialog" that requires an instance of Dialog.
657 | * dialog: Props.instanceOf(Dialog).isRequired
658 | * },
659 | * render: function() { ... }
660 | * });
661 | *
662 | * A more formal specification of how these methods are used:
663 | *
664 | * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
665 | * decl := ReactPropTypes.{type}(.isRequired)?
666 | *
667 | * Each and every declaration produces a function with the same signature. This
668 | * allows the creation of custom validation functions. For example:
669 | *
670 | * var MyLink = React.createClass({
671 | * propTypes: {
672 | * // An optional string or URI prop named "href".
673 | * href: function(props, propName, componentName) {
674 | * var propValue = props[propName];
675 | * if (propValue != null && typeof propValue !== 'string' &&
676 | * !(propValue instanceof URI)) {
677 | * return new Error(
678 | * 'Expected a string or an URI for ' + propName + ' in ' +
679 | * componentName
680 | * );
681 | * }
682 | * }
683 | * },
684 | * render: function() {...}
685 | * });
686 | *
687 | * @internal
688 | */
689 |
690 | var ANONYMOUS = '<>';
691 |
692 | // Important!
693 | // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
694 | var ReactPropTypes = {
695 | array: createPrimitiveTypeChecker('array'),
696 | bool: createPrimitiveTypeChecker('boolean'),
697 | func: createPrimitiveTypeChecker('function'),
698 | number: createPrimitiveTypeChecker('number'),
699 | object: createPrimitiveTypeChecker('object'),
700 | string: createPrimitiveTypeChecker('string'),
701 | symbol: createPrimitiveTypeChecker('symbol'),
702 |
703 | any: createAnyTypeChecker(),
704 | arrayOf: createArrayOfTypeChecker,
705 | element: createElementTypeChecker(),
706 | elementType: createElementTypeTypeChecker(),
707 | instanceOf: createInstanceTypeChecker,
708 | node: createNodeChecker(),
709 | objectOf: createObjectOfTypeChecker,
710 | oneOf: createEnumTypeChecker,
711 | oneOfType: createUnionTypeChecker,
712 | shape: createShapeTypeChecker,
713 | exact: createStrictShapeTypeChecker,
714 | };
715 |
716 | /**
717 | * inlined Object.is polyfill to avoid requiring consumers ship their own
718 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
719 | */
720 | /*eslint-disable no-self-compare*/
721 | function is(x, y) {
722 | // SameValue algorithm
723 | if (x === y) {
724 | // Steps 1-5, 7-10
725 | // Steps 6.b-6.e: +0 != -0
726 | return x !== 0 || 1 / x === 1 / y;
727 | } else {
728 | // Step 6.a: NaN == NaN
729 | return x !== x && y !== y;
730 | }
731 | }
732 | /*eslint-enable no-self-compare*/
733 |
734 | /**
735 | * We use an Error-like object for backward compatibility as people may call
736 | * PropTypes directly and inspect their output. However, we don't use real
737 | * Errors anymore. We don't inspect their stack anyway, and creating them
738 | * is prohibitively expensive if they are created too often, such as what
739 | * happens in oneOfType() for any type before the one that matched.
740 | */
741 | function PropTypeError(message) {
742 | this.message = message;
743 | this.stack = '';
744 | }
745 | // Make `instanceof Error` still work for returned errors.
746 | PropTypeError.prototype = Error.prototype;
747 |
748 | function createChainableTypeChecker(validate) {
749 | if (process.env.NODE_ENV !== 'production') {
750 | var manualPropTypeCallCache = {};
751 | var manualPropTypeWarningCount = 0;
752 | }
753 | function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
754 | componentName = componentName || ANONYMOUS;
755 | propFullName = propFullName || propName;
756 |
757 | if (secret !== ReactPropTypesSecret_1) {
758 | if (throwOnDirectAccess) {
759 | // New behavior only for users of `prop-types` package
760 | var err = new Error(
761 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
762 | 'Use `PropTypes.checkPropTypes()` to call them. ' +
763 | 'Read more at http://fb.me/use-check-prop-types'
764 | );
765 | err.name = 'Invariant Violation';
766 | throw err;
767 | } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
768 | // Old behavior for people using React.PropTypes
769 | var cacheKey = componentName + ':' + propName;
770 | if (
771 | !manualPropTypeCallCache[cacheKey] &&
772 | // Avoid spamming the console because they are often not actionable except for lib authors
773 | manualPropTypeWarningCount < 3
774 | ) {
775 | printWarning$1(
776 | 'You are manually calling a React.PropTypes validation ' +
777 | 'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
778 | 'and will throw in the standalone `prop-types` package. ' +
779 | 'You may be seeing this warning due to a third-party PropTypes ' +
780 | 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
781 | );
782 | manualPropTypeCallCache[cacheKey] = true;
783 | manualPropTypeWarningCount++;
784 | }
785 | }
786 | }
787 | if (props[propName] == null) {
788 | if (isRequired) {
789 | if (props[propName] === null) {
790 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
791 | }
792 | return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
793 | }
794 | return null;
795 | } else {
796 | return validate(props, propName, componentName, location, propFullName);
797 | }
798 | }
799 |
800 | var chainedCheckType = checkType.bind(null, false);
801 | chainedCheckType.isRequired = checkType.bind(null, true);
802 |
803 | return chainedCheckType;
804 | }
805 |
806 | function createPrimitiveTypeChecker(expectedType) {
807 | function validate(props, propName, componentName, location, propFullName, secret) {
808 | var propValue = props[propName];
809 | var propType = getPropType(propValue);
810 | if (propType !== expectedType) {
811 | // `propValue` being instance of, say, date/regexp, pass the 'object'
812 | // check, but we can offer a more precise error message here rather than
813 | // 'of type `object`'.
814 | var preciseType = getPreciseType(propValue);
815 |
816 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
817 | }
818 | return null;
819 | }
820 | return createChainableTypeChecker(validate);
821 | }
822 |
823 | function createAnyTypeChecker() {
824 | return createChainableTypeChecker(emptyFunctionThatReturnsNull);
825 | }
826 |
827 | function createArrayOfTypeChecker(typeChecker) {
828 | function validate(props, propName, componentName, location, propFullName) {
829 | if (typeof typeChecker !== 'function') {
830 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
831 | }
832 | var propValue = props[propName];
833 | if (!Array.isArray(propValue)) {
834 | var propType = getPropType(propValue);
835 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
836 | }
837 | for (var i = 0; i < propValue.length; i++) {
838 | var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
839 | if (error instanceof Error) {
840 | return error;
841 | }
842 | }
843 | return null;
844 | }
845 | return createChainableTypeChecker(validate);
846 | }
847 |
848 | function createElementTypeChecker() {
849 | function validate(props, propName, componentName, location, propFullName) {
850 | var propValue = props[propName];
851 | if (!isValidElement(propValue)) {
852 | var propType = getPropType(propValue);
853 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
854 | }
855 | return null;
856 | }
857 | return createChainableTypeChecker(validate);
858 | }
859 |
860 | function createElementTypeTypeChecker() {
861 | function validate(props, propName, componentName, location, propFullName) {
862 | var propValue = props[propName];
863 | if (!reactIs.isValidElementType(propValue)) {
864 | var propType = getPropType(propValue);
865 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
866 | }
867 | return null;
868 | }
869 | return createChainableTypeChecker(validate);
870 | }
871 |
872 | function createInstanceTypeChecker(expectedClass) {
873 | function validate(props, propName, componentName, location, propFullName) {
874 | if (!(props[propName] instanceof expectedClass)) {
875 | var expectedClassName = expectedClass.name || ANONYMOUS;
876 | var actualClassName = getClassName(props[propName]);
877 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
878 | }
879 | return null;
880 | }
881 | return createChainableTypeChecker(validate);
882 | }
883 |
884 | function createEnumTypeChecker(expectedValues) {
885 | if (!Array.isArray(expectedValues)) {
886 | if (process.env.NODE_ENV !== 'production') {
887 | if (arguments.length > 1) {
888 | printWarning$1(
889 | 'Invalid arguments supplied to oneOf, expected an array, got ' + arguments.length + ' arguments. ' +
890 | 'A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z]).'
891 | );
892 | } else {
893 | printWarning$1('Invalid argument supplied to oneOf, expected an array.');
894 | }
895 | }
896 | return emptyFunctionThatReturnsNull;
897 | }
898 |
899 | function validate(props, propName, componentName, location, propFullName) {
900 | var propValue = props[propName];
901 | for (var i = 0; i < expectedValues.length; i++) {
902 | if (is(propValue, expectedValues[i])) {
903 | return null;
904 | }
905 | }
906 |
907 | var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
908 | var type = getPreciseType(value);
909 | if (type === 'symbol') {
910 | return String(value);
911 | }
912 | return value;
913 | });
914 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
915 | }
916 | return createChainableTypeChecker(validate);
917 | }
918 |
919 | function createObjectOfTypeChecker(typeChecker) {
920 | function validate(props, propName, componentName, location, propFullName) {
921 | if (typeof typeChecker !== 'function') {
922 | return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
923 | }
924 | var propValue = props[propName];
925 | var propType = getPropType(propValue);
926 | if (propType !== 'object') {
927 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
928 | }
929 | for (var key in propValue) {
930 | if (has$1(propValue, key)) {
931 | var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
932 | if (error instanceof Error) {
933 | return error;
934 | }
935 | }
936 | }
937 | return null;
938 | }
939 | return createChainableTypeChecker(validate);
940 | }
941 |
942 | function createUnionTypeChecker(arrayOfTypeCheckers) {
943 | if (!Array.isArray(arrayOfTypeCheckers)) {
944 | process.env.NODE_ENV !== 'production' ? printWarning$1('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
945 | return emptyFunctionThatReturnsNull;
946 | }
947 |
948 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
949 | var checker = arrayOfTypeCheckers[i];
950 | if (typeof checker !== 'function') {
951 | printWarning$1(
952 | 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
953 | 'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
954 | );
955 | return emptyFunctionThatReturnsNull;
956 | }
957 | }
958 |
959 | function validate(props, propName, componentName, location, propFullName) {
960 | for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
961 | var checker = arrayOfTypeCheckers[i];
962 | if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
963 | return null;
964 | }
965 | }
966 |
967 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
968 | }
969 | return createChainableTypeChecker(validate);
970 | }
971 |
972 | function createNodeChecker() {
973 | function validate(props, propName, componentName, location, propFullName) {
974 | if (!isNode(props[propName])) {
975 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
976 | }
977 | return null;
978 | }
979 | return createChainableTypeChecker(validate);
980 | }
981 |
982 | function createShapeTypeChecker(shapeTypes) {
983 | function validate(props, propName, componentName, location, propFullName) {
984 | var propValue = props[propName];
985 | var propType = getPropType(propValue);
986 | if (propType !== 'object') {
987 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
988 | }
989 | for (var key in shapeTypes) {
990 | var checker = shapeTypes[key];
991 | if (!checker) {
992 | continue;
993 | }
994 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
995 | if (error) {
996 | return error;
997 | }
998 | }
999 | return null;
1000 | }
1001 | return createChainableTypeChecker(validate);
1002 | }
1003 |
1004 | function createStrictShapeTypeChecker(shapeTypes) {
1005 | function validate(props, propName, componentName, location, propFullName) {
1006 | var propValue = props[propName];
1007 | var propType = getPropType(propValue);
1008 | if (propType !== 'object') {
1009 | return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
1010 | }
1011 | // We need to check all keys in case some are required but missing from
1012 | // props.
1013 | var allKeys = objectAssign({}, props[propName], shapeTypes);
1014 | for (var key in allKeys) {
1015 | var checker = shapeTypes[key];
1016 | if (!checker) {
1017 | return new PropTypeError(
1018 | 'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
1019 | '\nBad object: ' + JSON.stringify(props[propName], null, ' ') +
1020 | '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, ' ')
1021 | );
1022 | }
1023 | var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
1024 | if (error) {
1025 | return error;
1026 | }
1027 | }
1028 | return null;
1029 | }
1030 |
1031 | return createChainableTypeChecker(validate);
1032 | }
1033 |
1034 | function isNode(propValue) {
1035 | switch (typeof propValue) {
1036 | case 'number':
1037 | case 'string':
1038 | case 'undefined':
1039 | return true;
1040 | case 'boolean':
1041 | return !propValue;
1042 | case 'object':
1043 | if (Array.isArray(propValue)) {
1044 | return propValue.every(isNode);
1045 | }
1046 | if (propValue === null || isValidElement(propValue)) {
1047 | return true;
1048 | }
1049 |
1050 | var iteratorFn = getIteratorFn(propValue);
1051 | if (iteratorFn) {
1052 | var iterator = iteratorFn.call(propValue);
1053 | var step;
1054 | if (iteratorFn !== propValue.entries) {
1055 | while (!(step = iterator.next()).done) {
1056 | if (!isNode(step.value)) {
1057 | return false;
1058 | }
1059 | }
1060 | } else {
1061 | // Iterator will provide entry [k,v] tuples rather than values.
1062 | while (!(step = iterator.next()).done) {
1063 | var entry = step.value;
1064 | if (entry) {
1065 | if (!isNode(entry[1])) {
1066 | return false;
1067 | }
1068 | }
1069 | }
1070 | }
1071 | } else {
1072 | return false;
1073 | }
1074 |
1075 | return true;
1076 | default:
1077 | return false;
1078 | }
1079 | }
1080 |
1081 | function isSymbol(propType, propValue) {
1082 | // Native Symbol.
1083 | if (propType === 'symbol') {
1084 | return true;
1085 | }
1086 |
1087 | // falsy value can't be a Symbol
1088 | if (!propValue) {
1089 | return false;
1090 | }
1091 |
1092 | // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
1093 | if (propValue['@@toStringTag'] === 'Symbol') {
1094 | return true;
1095 | }
1096 |
1097 | // Fallback for non-spec compliant Symbols which are polyfilled.
1098 | if (typeof Symbol === 'function' && propValue instanceof Symbol) {
1099 | return true;
1100 | }
1101 |
1102 | return false;
1103 | }
1104 |
1105 | // Equivalent of `typeof` but with special handling for array and regexp.
1106 | function getPropType(propValue) {
1107 | var propType = typeof propValue;
1108 | if (Array.isArray(propValue)) {
1109 | return 'array';
1110 | }
1111 | if (propValue instanceof RegExp) {
1112 | // Old webkits (at least until Android 4.0) return 'function' rather than
1113 | // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
1114 | // passes PropTypes.object.
1115 | return 'object';
1116 | }
1117 | if (isSymbol(propType, propValue)) {
1118 | return 'symbol';
1119 | }
1120 | return propType;
1121 | }
1122 |
1123 | // This handles more types than `getPropType`. Only used for error messages.
1124 | // See `createPrimitiveTypeChecker`.
1125 | function getPreciseType(propValue) {
1126 | if (typeof propValue === 'undefined' || propValue === null) {
1127 | return '' + propValue;
1128 | }
1129 | var propType = getPropType(propValue);
1130 | if (propType === 'object') {
1131 | if (propValue instanceof Date) {
1132 | return 'date';
1133 | } else if (propValue instanceof RegExp) {
1134 | return 'regexp';
1135 | }
1136 | }
1137 | return propType;
1138 | }
1139 |
1140 | // Returns a string that is postfixed to a warning about an invalid type.
1141 | // For example, "undefined" or "of type array"
1142 | function getPostfixForTypeWarning(value) {
1143 | var type = getPreciseType(value);
1144 | switch (type) {
1145 | case 'array':
1146 | case 'object':
1147 | return 'an ' + type;
1148 | case 'boolean':
1149 | case 'date':
1150 | case 'regexp':
1151 | return 'a ' + type;
1152 | default:
1153 | return type;
1154 | }
1155 | }
1156 |
1157 | // Returns class name of the object, if any.
1158 | function getClassName(propValue) {
1159 | if (!propValue.constructor || !propValue.constructor.name) {
1160 | return ANONYMOUS;
1161 | }
1162 | return propValue.constructor.name;
1163 | }
1164 |
1165 | ReactPropTypes.checkPropTypes = checkPropTypes_1;
1166 | ReactPropTypes.resetWarningCache = checkPropTypes_1.resetWarningCache;
1167 | ReactPropTypes.PropTypes = ReactPropTypes;
1168 |
1169 | return ReactPropTypes;
1170 | };
1171 |
1172 | function emptyFunction() {}
1173 | function emptyFunctionWithReset() {}
1174 | emptyFunctionWithReset.resetWarningCache = emptyFunction;
1175 |
1176 | var factoryWithThrowingShims = function() {
1177 | function shim(props, propName, componentName, location, propFullName, secret) {
1178 | if (secret === ReactPropTypesSecret_1) {
1179 | // It is still safe when called from React.
1180 | return;
1181 | }
1182 | var err = new Error(
1183 | 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
1184 | 'Use PropTypes.checkPropTypes() to call them. ' +
1185 | 'Read more at http://fb.me/use-check-prop-types'
1186 | );
1187 | err.name = 'Invariant Violation';
1188 | throw err;
1189 | } shim.isRequired = shim;
1190 | function getShim() {
1191 | return shim;
1192 | } // Important!
1193 | // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
1194 | var ReactPropTypes = {
1195 | array: shim,
1196 | bool: shim,
1197 | func: shim,
1198 | number: shim,
1199 | object: shim,
1200 | string: shim,
1201 | symbol: shim,
1202 |
1203 | any: shim,
1204 | arrayOf: getShim,
1205 | element: shim,
1206 | elementType: shim,
1207 | instanceOf: getShim,
1208 | node: shim,
1209 | objectOf: getShim,
1210 | oneOf: getShim,
1211 | oneOfType: getShim,
1212 | shape: getShim,
1213 | exact: getShim,
1214 |
1215 | checkPropTypes: emptyFunctionWithReset,
1216 | resetWarningCache: emptyFunction
1217 | };
1218 |
1219 | ReactPropTypes.PropTypes = ReactPropTypes;
1220 |
1221 | return ReactPropTypes;
1222 | };
1223 |
1224 | var propTypes = createCommonjsModule(function (module) {
1225 | /**
1226 | * Copyright (c) 2013-present, Facebook, Inc.
1227 | *
1228 | * This source code is licensed under the MIT license found in the
1229 | * LICENSE file in the root directory of this source tree.
1230 | */
1231 |
1232 | if (process.env.NODE_ENV !== 'production') {
1233 | var ReactIs = reactIs;
1234 |
1235 | // By explicitly using `prop-types` you are opting into new development behavior.
1236 | // http://fb.me/prop-types-in-prod
1237 | var throwOnDirectAccess = true;
1238 | module.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
1239 | } else {
1240 | // By explicitly using `prop-types` you are opting into new production behavior.
1241 | // http://fb.me/prop-types-in-prod
1242 | module.exports = factoryWithThrowingShims();
1243 | }
1244 | });
1245 |
1246 | var ReactEditableSvgLabel =
1247 | /*#__PURE__*/
1248 | function (_React$Component) {
1249 | _inherits(ReactEditableSvgLabel, _React$Component);
1250 |
1251 | function ReactEditableSvgLabel(props) {
1252 | var _this;
1253 |
1254 | _classCallCheck(this, ReactEditableSvgLabel);
1255 |
1256 | _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactEditableSvgLabel).call(this, props));
1257 | _this.state = {
1258 | isEditing: false,
1259 | labelX: 0,
1260 | labelY: 0,
1261 | labelWidth: 0,
1262 | labelHeight: 0
1263 | };
1264 | _this.inputRef = React.createRef();
1265 | _this.labelRef = React.createRef();
1266 | _this.portalRef = React.createRef();
1267 | _this.handleOpen = _this.handleOpen.bind(_assertThisInitialized(_this));
1268 | _this.toggleEditing = _this.toggleEditing.bind(_assertThisInitialized(_this));
1269 | _this.handleChangeText = _this.handleChangeText.bind(_assertThisInitialized(_this));
1270 | _this.updateLabelBounds = _this.updateLabelBounds.bind(_assertThisInitialized(_this));
1271 | return _this;
1272 | }
1273 |
1274 | _createClass(ReactEditableSvgLabel, [{
1275 | key: "handleOpen",
1276 | value: function handleOpen(domNode) {
1277 | if (this.props.focusOnOpen) {
1278 | this.inputRef.current.focus();
1279 | }
1280 | }
1281 | }, {
1282 | key: "toggleEditing",
1283 | value: function toggleEditing() {
1284 | var newIsEditing = !this.state.isEditing;
1285 | this.setState({
1286 | isEditing: newIsEditing
1287 | });
1288 |
1289 | if (newIsEditing) {
1290 | this.portalRef.current.openPortal();
1291 | }
1292 | }
1293 | }, {
1294 | key: "handleChangeText",
1295 | value: function handleChangeText(e) {
1296 | var text = e.target.value;
1297 | this.props.onChange(text);
1298 | }
1299 | }, {
1300 | key: "updateLabelBounds",
1301 | value: function updateLabelBounds() {
1302 | var rect = this.labelRef.current.getBoundingClientRect();
1303 | this.setState({
1304 | labelX: rect.left,
1305 | labelY: rect.top,
1306 | labelWidth: rect.width,
1307 | labelHeight: rect.height
1308 | });
1309 | }
1310 | }, {
1311 | key: "componentDidMount",
1312 | value: function componentDidMount() {
1313 | this.updateLabelBounds();
1314 | }
1315 | }, {
1316 | key: "render",
1317 | value: function render() {
1318 | var _this2 = this;
1319 |
1320 | // Omit onChange, minLabelWidth, and children.
1321 | var passThroughProps = Object.assign({}, this.props);
1322 | Object.keys(this.constructor.propTypes).forEach(function (key) {
1323 | delete passThroughProps[key];
1324 | });
1325 | return React.createElement(reactPortal.PortalWithState, {
1326 | ref: this.portalRef,
1327 | closeOnOutsideClick: true,
1328 | onOpen: this.handleOpen
1329 | }, function (_ref) {
1330 | var openPortal = _ref.openPortal,
1331 | closePortal = _ref.closePortal,
1332 | isOpen = _ref.isOpen,
1333 | portal = _ref.portal;
1334 | return React.createElement(React.Fragment, null, React.createElement("text", _extends({
1335 | ref: _this2.labelRef,
1336 | onClick: openPortal
1337 | }, passThroughProps), _this2.props.children), portal(React.createElement("input", {
1338 | ref: _this2.inputRef,
1339 | type: "text",
1340 | value: _this2.props.children,
1341 | onChange: _this2.handleChangeText,
1342 | style: {
1343 | position: 'absolute',
1344 | top: _this2.state.labelY,
1345 | left: _this2.state.labelX,
1346 | width: Math.max(_this2.props.minLabelWidth, _this2.state.labelWidth),
1347 | height: _this2.state.labelHeight
1348 | }
1349 | })));
1350 | });
1351 | }
1352 | }]);
1353 |
1354 | return ReactEditableSvgLabel;
1355 | }(React.Component);
1356 |
1357 | ReactEditableSvgLabel.propTypes = {
1358 | onChange: propTypes.func,
1359 | minLabelWidth: propTypes.number,
1360 | focusOnOpen: propTypes.bool,
1361 | children: propTypes.any
1362 | };
1363 | ReactEditableSvgLabel.defaultProps = {
1364 | onChange: function onChange() {},
1365 | minLabelWidth: 100,
1366 | focusOnOpen: true
1367 | };
1368 |
1369 | return ReactEditableSvgLabel;
1370 |
1371 | }));
1372 |
--------------------------------------------------------------------------------