kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(icons): allow SVG icons to receive arbitrary props (#9106)

Browse Source 
These arbitrary props will allow to handle
native React element events among other things.

Refs #9094
This commit is contained in:
Vladimír Gorej
2023-08-02 14:39:05 +02:00
committed by GitHub
parent e255f510cf
commit 733e51ad65
14 changed files with 156 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/core/plugins/auth/components/lock-auth-icon.jsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* @prettier
*/
import React from "react"
import PropTypes from "prop-types"
import omit from "lodash/omit"
class LockAuthIcon extends React.Component {
mapStateToProps(state, props) {
const ownProps = omit(props, Object.keys(props.getSystem()))
return { state, ownProps }
}
render() {
const { getComponent, ownProps } = this.props
const LockIcon = getComponent("LockIcon")
return <LockIcon {...ownProps} />
}
}
LockAuthIcon.propTypes = {
getComponent: PropTypes.func.isRequired,
ownProps: PropTypes.shape({}).isRequired,
}
export default LockAuthIcon

17
src/core/plugins/auth/components/lock-auth-operation.jsx
View File

@@ -1,17 +0,0 @@
/**
* @prettier
*/
import React from "react"
import PropTypes from "prop-types"
const LockAuthOperation = ({ getComponent, ...props }) => {
const LockIcon = getComponent("LockIcon")
return <LockIcon {...props} />
}
LockAuthOperation.propTypes = {
getComponent: PropTypes.func.isRequired
}
export default LockAuthOperation

17
src/core/plugins/auth/components/lock-auth.jsx
View File

@@ -1,17 +0,0 @@
/**
* @prettier
*/
import React from "react"
import PropTypes from "prop-types"
const LockAuth = ({ getComponent, ...props }) => {
const LockIcon = getComponent("LockIcon")
return <LockIcon {...props} />
}
LockAuth.propTypes = {
getComponent: PropTypes.func.isRequired
}
export default LockAuth

27
src/core/plugins/auth/components/unlock-auth-icon.jsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* @prettier
*/
import React from "react"
import PropTypes from "prop-types"
import omit from "lodash/omit"
class UnlockAuthIcon extends React.Component {
mapStateToProps(state, props) {
const ownProps = omit(props, Object.keys(props.getSystem()))
return { state, ownProps }
}
render() {
const { getComponent, ownProps } = this.props
const UnlockIcon = getComponent("UnlockIcon")
return <UnlockIcon {...ownProps} />
}
}
UnlockAuthIcon.propTypes = {
getComponent: PropTypes.func.isRequired,
ownProps: PropTypes.shape({}).isRequired,
}
export default UnlockAuthIcon

17
src/core/plugins/auth/components/unlock-auth-operation.jsx
View File

@@ -1,17 +0,0 @@
/**
* @prettier
*/
import React from "react"
import PropTypes from "prop-types"
const UnlockAuthOperation = ({ getComponent, ...props }) => {
const UnlockIcon = getComponent("UnlockIcon")
return <UnlockIcon {...props} />
}
UnlockAuthOperation.propTypes = {
getComponent: PropTypes.func.isRequired
}
export default UnlockAuthOperation

17
src/core/plugins/auth/components/unlock-auth.jsx
View File

@@ -1,17 +0,0 @@
/**
* @prettier
*/
import React from "react"
import PropTypes from "prop-types"
const UnlockAuth = ({ getComponent, ...props }) => {
const UnlockIcon = getComponent("UnlockIcon")
return <UnlockIcon {...props} />
}
UnlockAuth.propTypes = {
getComponent: PropTypes.func.isRequired
}
export default UnlockAuth

10
src/core/plugins/auth/index.js
View File

@@ -5,10 +5,8 @@ import { execute as wrappedExecuteAction } from "./spec-extensions/wrap-actions"
import { loaded as wrappedLoadedAction } from "./configs-extensions/wrap-actions"
import { authorize as wrappedAuthorizeAction, logout as wrappedLogoutAction } from "./wrap-actions"
import LockAuthIcon from "./components/lock-auth"
import UnlockAuthIcon from "./components/unlock-auth"
import LockAuthOperationIcon from "./components/lock-auth-operation"
import UnlockAuthOperationIcon from "./components/unlock-auth-operation"
import LockAuthIcon from "./components/lock-auth-icon"
import UnlockAuthIcon from "./components/unlock-auth-icon"
export default function() {
return {
@@ -21,8 +19,8 @@ export default function() {
components: {
LockAuthIcon: LockAuthIcon,
UnlockAuthIcon: UnlockAuthIcon,
LockAuthOperationIcon: LockAuthOperationIcon,
UnlockAuthOperationIcon: UnlockAuthOperationIcon,
LockAuthOperationIcon: LockAuthIcon,
UnlockAuthOperationIcon: UnlockAuthIcon,
},
statePlugins: {
auth: {

7
src/core/plugins/icons/components/arrow-down.jsx
View File

@@ -4,7 +4,7 @@
import React from "react"
import PropTypes from "prop-types"
const ArrowDown = ({ className, width, height }) => (
const ArrowDown = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
@@ -13,8 +13,9 @@ const ArrowDown = ({ className, width, height }) => (
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z" />
</svg>
)
@@ -30,4 +31,4 @@ ArrowDown.defaultProps = {
height: 20,
}
export default ArrowDown
export default ArrowDown

7
src/core/plugins/icons/components/arrow-up.jsx
View File

@@ -4,7 +4,7 @@
import React from "react"
import PropTypes from "prop-types"
const ArrowUp = ({ className, width, height }) => (
const ArrowUp = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
@@ -13,8 +13,9 @@ const ArrowUp = ({ className, width, height }) => (
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<path d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z"/>
<path d="M 17.418 14.908 C 17.69 15.176 18.127 15.176 18.397 14.908 C 18.667 14.64 18.668 14.207 18.397 13.939 L 10.489 6.109 C 10.219 5.841 9.782 5.841 9.51 6.109 L 1.602 13.939 C 1.332 14.207 1.332 14.64 1.602 14.908 C 1.873 15.176 2.311 15.176 2.581 14.908 L 10 7.767 L 17.418 14.908 Z" />
</svg>
)
@@ -30,4 +31,4 @@ ArrowUp.defaultProps = {
height: 20,
}
export default ArrowUp
export default ArrowUp

7
src/core/plugins/icons/components/arrow.jsx
View File

@@ -4,7 +4,7 @@
import React from "react"
import PropTypes from "prop-types"
const Arrow = ({ className, width, height }) => (
const Arrow = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
@@ -13,8 +13,9 @@ const Arrow = ({ className, width, height }) => (
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z" />
</svg>
)
@@ -30,4 +31,4 @@ Arrow.defaultProps = {
height: 20,
}
export default Arrow
export default Arrow

39
src/core/plugins/icons/components/close.jsx
View File

@@ -4,30 +4,31 @@
import React from "react"
import PropTypes from "prop-types"
const Close = ({ className, width, height }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
>
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z" />
</svg>
const Close = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z" />
</svg>
)
Close.propTypes = {
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
}
Close.defaultProps = {
className: null,
width: 20,
height: 20,
className: null,
width: 20,
height: 20,
}
export default Close
export default Close

50
src/core/plugins/icons/components/copy.jsx
View File

@@ -4,35 +4,37 @@
import React from "react"
import PropTypes from "prop-types"
const Copy = ({ className, width, height }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 16"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
>
<g transform='translate(2, -1)'>
<path
fill='#ffffff'
fillRule='evenodd'
d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path>
</g>
</svg>
const Copy = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 15 16"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<g transform="translate(2, -1)">
<path
fill="#ffffff"
fillRule="evenodd"
d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"
></path>
</g>
</svg>
)
Copy.propTypes = {
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
}
Copy.defaultProps = {
className: null,
width: 15,
height: 16,
className: null,
width: 15,
height: 16,
}
export default Copy
export default Copy

39
src/core/plugins/icons/components/lock.jsx
View File

@@ -4,30 +4,31 @@
import React from "react"
import PropTypes from "prop-types"
const Lock = ({ className, width, height }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z" />
</svg>
const Lock = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z" />
</svg>
)
Lock.propTypes = {
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
}
Lock.defaultProps = {
className: null,
width: 20,
height: 20,
className: null,
width: 20,
height: 20,
}
export default Lock
export default Lock

39
src/core/plugins/icons/components/unlock.jsx
View File

@@ -4,30 +4,31 @@
import React from "react"
import PropTypes from "prop-types"
const Unlock = ({ className, width, height }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
</svg>
const Unlock = ({ className, width, height, ...rest }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
className={className}
width={width}
height={height}
aria-hidden="true"
focusable="false"
{...rest}
>
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
</svg>
)
Unlock.propTypes = {
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
className: PropTypes.string,
width: PropTypes.string,
height: PropTypes.string,
}
Unlock.defaultProps = {
className: null,
width: 20,
height: 20,
className: null,
width: 20,
height: 20,
}
export default Unlock
export default Unlock