Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
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
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
87c31b3c
Unverified
Commit
87c31b3c
authored
Apr 09, 2019
by
Robert Knight
Committed by
GitHub
Apr 09, 2019
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #1038 from hypothesis/react-svg-icon
Convert `<svg-icon>` component to React
parents
5eaea90d
e5728d69
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
35 additions
and
39 deletions
+35
-39
svg-icon.js
src/sidebar/components/svg-icon.js
+20
-22
svg-icon-test.js
src/sidebar/components/test/svg-icon-test.js
+14
-16
index.js
src/sidebar/index.js
+1
-1
No files found.
src/sidebar/components/svg-icon.js
View file @
87c31b3c
'use strict'
;
/**
* The <svg-icon> component renders SVG icons using inline <svg> tags,
* enabling their appearance to be customized via CSS.
*
* This matches the way we do icons on the website, see
* https://github.com/hypothesis/h/pull/3675
*/
const
{
createElement
}
=
require
(
'preact'
);
const
propTypes
=
require
(
'prop-types'
);
// The list of supported icons
const
icons
=
{
...
...
@@ -14,21 +9,24 @@ const icons = {
cursor
:
require
(
'../../images/icons/cursor.svg'
),
};
// @ngInject
function
SvgIconController
(
$element
)
{
this
.
$onInit
=
()
=>
{
if
(
!
icons
[
this
.
name
])
{
throw
new
Error
(
'Unknown icon: '
+
this
.
name
);
}
$element
[
0
].
innerHTML
=
icons
[
this
.
name
];
};
/**
* Component that renders icons using inline `<svg>` elements.
* This enables their appearance to be customized via CSS.
*
* This matches the way we do icons on the website, see
* https://github.com/hypothesis/h/pull/3675
*/
function
SvgIcon
({
name
})
{
if
(
!
icons
[
name
])
{
throw
new
Error
(
`Unknown icon
${
name
}
`
);
}
const
markup
=
{
__html
:
icons
[
name
]
};
return
<
span
dangerouslySetInnerHTML
=
{
markup
}
/>
;
}
module
.
exports
=
{
controllerAs
:
'vm'
,
controller
:
SvgIconController
,
bindings
:
{
/** The name of the icon to load. */
name
:
'<'
,
},
SvgIcon
.
propTypes
=
{
/** The name of the icon to load. */
name
:
propTypes
.
string
,
};
module
.
exports
=
SvgIcon
;
src/sidebar/components/test/svg-icon-test.js
View file @
87c31b3c
'use strict'
;
const
angular
=
require
(
'angular
'
);
const
{
createElement
,
render
}
=
require
(
'preact
'
);
const
util
=
require
(
'../../directive/test/util
'
);
const
SvgIcon
=
require
(
'../svg-icon
'
);
describe
(
'svgIcon'
,
function
()
{
before
(
function
()
{
angular
.
module
(
'app'
,
[]).
component
(
'svgIcon'
,
require
(
'../svg-icon'
));
});
beforeEach
(
function
()
{
angular
.
mock
.
module
(
'app'
);
});
describe
(
'SvgIcon'
,
()
=>
{
// Tests here use DOM APIs rather than Enzyme because SvgIcon uses
// `dangerouslySetInnerHTML` for its content, and that is not visible in the
// Enzyme tree.
it
(
"sets the element's content to the content of the SVG"
,
function
()
{
const
el
=
util
.
createDirective
(
document
,
'svgIcon'
,
{
name
:
'refresh'
});
assert
.
ok
(
el
[
0
].
querySelector
(
'svg'
));
it
(
"sets the element's content to the content of the SVG"
,
()
=>
{
const
container
=
document
.
createElement
(
'div'
);
render
(
<
SvgIcon
name
=
"refresh"
/>
,
container
);
assert
.
ok
(
container
.
querySelector
(
'svg'
));
});
it
(
'throws an error if the icon is unknown'
,
function
()
{
assert
.
throws
(
function
()
{
util
.
createDirective
(
document
,
'svgIcon'
,
{
name
:
'unknown'
});
it
(
'throws an error if the icon is unknown'
,
()
=>
{
assert
.
throws
(()
=>
{
const
container
=
document
.
createElement
(
'div'
);
render
(
<
SvgIcon
name
=
"unknown"
/>
,
container
);
});
});
});
src/sidebar/index.js
View file @
87c31b3c
...
...
@@ -185,7 +185,7 @@ function startAngularApp(config) {
.
component
(
'sortDropdown'
,
require
(
'./components/sort-dropdown'
))
.
component
(
'spinner'
,
require
(
'./components/spinner'
))
.
component
(
'streamContent'
,
require
(
'./components/stream-content'
))
.
component
(
'svgIcon'
,
require
(
'./components/svg-icon'
))
.
component
(
'svgIcon'
,
wrapReactComponent
(
require
(
'./components/svg-icon'
)
))
.
component
(
'tagEditor'
,
require
(
'./components/tag-editor'
))
.
component
(
'threadList'
,
require
(
'./components/thread-list'
))
.
component
(
'timestamp'
,
require
(
'./components/timestamp'
))
...
...
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