Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
8f0d92ef
Commit
8f0d92ef
authored
Mar 19, 2019
by
Andrej Ocenas
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Allow angular react bridge to use kebab case attribute names
parent
8af1326a
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
15 additions
and
6 deletions
+15
-6
public/app/core/services/ng_react.ts
+15
-6
No files found.
public/app/core/services/ng_react.ts
View file @
8f0d92ef
...
...
@@ -9,6 +9,7 @@
// - reactComponent (generic directive for delegating off to React Components)
// - reactDirective (factory for creating specific directives that correspond to reactComponent directives)
import
{
kebabCase
}
from
'lodash'
;
import
React
from
'react'
;
import
ReactDOM
from
'react-dom'
;
import
angular
from
'angular'
;
...
...
@@ -155,11 +156,17 @@ function getPropExpression(prop) {
return
Array
.
isArray
(
prop
)
?
prop
[
0
]
:
prop
;
}
// find the normalized attribute knowing that React props accept any type of capitalization
function
findAttribute
(
attrs
,
propName
)
{
const
index
=
Object
.
keys
(
attrs
).
filter
(
attr
=>
{
return
attr
.
toLowerCase
()
===
propName
.
toLowerCase
();
})[
0
];
/**
* Finds the normalized attribute knowing that React props accept any type of capitalization and it also handles
* kabab case attributes which can be used in case the attribute would also be a standard html attribute and would be
* evaluated by the browser as such.
* @param attrs All attributes of the component.
* @param propName Name of the prop that react component expects.
*/
function
findAttribute
(
attrs
:
string
,
propName
:
string
):
string
{
const
index
=
Object
.
keys
(
attrs
).
find
(
attr
=>
{
return
attr
.
toLowerCase
()
===
propName
.
toLowerCase
()
||
attr
.
toLowerCase
()
===
kebabCase
(
propName
);
});
return
attrs
[
index
];
}
...
...
@@ -274,7 +281,9 @@ const reactDirective = $injector => {
// watch each property name and trigger an update whenever something changes,
// to update scope.props with new values
const
propExpressions
=
props
.
map
(
prop
=>
{
return
Array
.
isArray
(
prop
)
?
[
attrs
[
getPropName
(
prop
)],
getPropConfig
(
prop
)]
:
attrs
[
prop
];
return
Array
.
isArray
(
prop
)
?
[
findAttribute
(
attrs
,
prop
[
0
]),
getPropConfig
(
prop
)]
:
findAttribute
(
attrs
,
prop
);
});
// If we don't have any props, then our watch statement won't fire.
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment