refactor(components): rewrite ModelExample into functional component (#9668)
This commit is contained in:
Vladimír Gorej
@@ -1,146 +1,162 @@
|
|||||||
import React from "react"
|
/**
|
||||||
|
* @prettier
|
||||||
|
*/
|
||||||
|
import React, { useMemo, useState, useEffect, useCallback, useRef } from "react"
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
import ImPropTypes from "react-immutable-proptypes"
|
import ImPropTypes from "react-immutable-proptypes"
|
||||||
import cx from "classnames"
|
import cx from "classnames"
|
||||||
import randomBytes from "randombytes"
|
import randomBytes from "randombytes"
|
||||||
|
|
||||||
export default class ModelExample extends React.Component {
|
const usePrevious = (value) => {
|
||||||
static propTypes = {
|
const ref = useRef()
|
||||||
getComponent: PropTypes.func.isRequired,
|
useEffect(() => {
|
||||||
specSelectors: PropTypes.object.isRequired,
|
ref.current = value
|
||||||
schema: PropTypes.object.isRequired,
|
})
|
||||||
example: PropTypes.any.isRequired,
|
return ref.current
|
||||||
isExecute: PropTypes.bool,
|
}
|
||||||
getConfigs: PropTypes.func.isRequired,
|
|
||||||
specPath: ImPropTypes.list.isRequired,
|
|
||||||
includeReadOnly: PropTypes.bool,
|
|
||||||
includeWriteOnly: PropTypes.bool,
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props, context) {
|
const useTabs = ({ initialTab, isExecute, schema, example }) => {
|
||||||
super(props, context)
|
const tabs = useMemo(() => ({ example: "example", model: "model" }), [])
|
||||||
let { getConfigs, isExecute, schema } = this.props
|
const allowedTabs = useMemo(() => Object.keys(tabs), [tabs])
|
||||||
let { defaultModelRendering } = getConfigs()
|
const tab =
|
||||||
|
!allowedTabs.includes(initialTab) || !schema || isExecute
|
||||||
|
? tabs.example
|
||||||
|
: initialTab
|
||||||
|
const prevIsExecute = usePrevious(isExecute)
|
||||||
|
const [activeTab, setActiveTab] = useState(tab)
|
||||||
|
const handleTabChange = useCallback((e) => {
|
||||||
|
setActiveTab(e.target.dataset.name)
|
||||||
|
}, [])
|
||||||
|
|
||||||
let activeTab = defaultModelRendering
|
useEffect(() => {
|
||||||
|
if (prevIsExecute && !isExecute && example) {
|
||||||
if (defaultModelRendering !== "example" && defaultModelRendering !== "model") {
|
setActiveTab(tabs.example)
|
||||||
activeTab = "example"
|
|
||||||
}
|
}
|
||||||
|
}, [prevIsExecute, isExecute, example])
|
||||||
|
|
||||||
if (!schema) {
|
return { activeTab, onTabChange: handleTabChange, tabs }
|
||||||
activeTab = "example"
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if(isExecute) {
|
const ModelExample = ({
|
||||||
activeTab = "example"
|
schema,
|
||||||
}
|
example,
|
||||||
|
isExecute = false,
|
||||||
|
specPath,
|
||||||
|
includeWriteOnly = false,
|
||||||
|
includeReadOnly = false,
|
||||||
|
getComponent,
|
||||||
|
getConfigs,
|
||||||
|
specSelectors,
|
||||||
|
}) => {
|
||||||
|
const { defaultModelRendering, defaultModelExpandDepth } = getConfigs()
|
||||||
|
const ModelWrapper = getComponent("ModelWrapper")
|
||||||
|
const HighlightCode = getComponent("highlightCode")
|
||||||
|
const exampleTabId = randomBytes(5).toString("base64")
|
||||||
|
const examplePanelId = randomBytes(5).toString("base64")
|
||||||
|
const modelTabId = randomBytes(5).toString("base64")
|
||||||
|
const modelPanelId = randomBytes(5).toString("base64")
|
||||||
|
const isOAS3 = specSelectors.isOAS3()
|
||||||
|
const { activeTab, tabs, onTabChange } = useTabs({
|
||||||
|
initialTab: defaultModelRendering,
|
||||||
|
isExecute,
|
||||||
|
schema,
|
||||||
|
example,
|
||||||
|
})
|
||||||
|
|
||||||
this.state = {
|
return (
|
||||||
activeTab,
|
<div className="model-example">
|
||||||
}
|
<ul className="tab" role="tablist">
|
||||||
}
|
<li
|
||||||
|
className={cx("tabitem", { active: activeTab === tabs.example })}
|
||||||
activeTab = ( e ) => {
|
role="presentation"
|
||||||
let { target : { dataset : { name } } } = e
|
>
|
||||||
|
<button
|
||||||
this.setState({
|
aria-controls={examplePanelId}
|
||||||
activeTab: name
|
aria-selected={activeTab === tabs.example}
|
||||||
})
|
className="tablinks"
|
||||||
}
|
data-name="example"
|
||||||
|
id={exampleTabId}
|
||||||
UNSAFE_componentWillReceiveProps(nextProps) {
|
onClick={onTabChange}
|
||||||
if (
|
role="tab"
|
||||||
nextProps.isExecute &&
|
>
|
||||||
!this.props.isExecute &&
|
{isExecute ? "Edit Value" : "Example Value"}
|
||||||
this.props.example
|
</button>
|
||||||
) {
|
</li>
|
||||||
this.setState({ activeTab: "example" })
|
{schema && (
|
||||||
}
|
<li
|
||||||
}
|
className={cx("tabitem", { active: activeTab === tabs.model })}
|
||||||
|
role="presentation"
|
||||||
render() {
|
>
|
||||||
let { getComponent, specSelectors, schema, example, isExecute, getConfigs, specPath, includeReadOnly, includeWriteOnly } = this.props
|
|
||||||
let { defaultModelExpandDepth } = getConfigs()
|
|
||||||
const ModelWrapper = getComponent("ModelWrapper")
|
|
||||||
const HighlightCode = getComponent("highlightCode")
|
|
||||||
const exampleTabId = randomBytes(5).toString("base64")
|
|
||||||
const examplePanelId = randomBytes(5).toString("base64")
|
|
||||||
const modelTabId = randomBytes(5).toString("base64")
|
|
||||||
const modelPanelId = randomBytes(5).toString("base64")
|
|
||||||
|
|
||||||
let isOAS3 = specSelectors.isOAS3()
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="model-example">
|
|
||||||
<ul className="tab" role="tablist">
|
|
||||||
<li className={cx("tabitem", { active: this.state.activeTab === "example" })} role="presentation">
|
|
||||||
<button
|
<button
|
||||||
aria-controls={examplePanelId}
|
aria-controls={modelPanelId}
|
||||||
aria-selected={this.state.activeTab === "example"}
|
aria-selected={activeTab === tabs.model}
|
||||||
className="tablinks"
|
className={cx("tablinks", { inactive: isExecute })}
|
||||||
data-name="example"
|
data-name="model"
|
||||||
id={exampleTabId}
|
id={modelTabId}
|
||||||
onClick={ this.activeTab }
|
onClick={onTabChange}
|
||||||
role="tab"
|
role="tab"
|
||||||
>
|
>
|
||||||
{isExecute ? "Edit Value" : "Example Value"}
|
{isOAS3 ? "Schema" : "Model"}
|
||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
{ schema && (
|
|
||||||
<li className={cx("tabitem", { active: this.state.activeTab === "model" })} role="presentation">
|
|
||||||
<button
|
|
||||||
aria-controls={modelPanelId}
|
|
||||||
aria-selected={this.state.activeTab === "model"}
|
|
||||||
className={cx("tablinks", { inactive: isExecute })}
|
|
||||||
data-name="model"
|
|
||||||
id={modelTabId}
|
|
||||||
onClick={ this.activeTab }
|
|
||||||
role="tab"
|
|
||||||
>
|
|
||||||
{isOAS3 ? "Schema" : "Model" }
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
{this.state.activeTab === "example" && (
|
|
||||||
<div
|
|
||||||
aria-hidden={this.state.activeTab !== "example"}
|
|
||||||
aria-labelledby={exampleTabId}
|
|
||||||
data-name="examplePanel"
|
|
||||||
id={examplePanelId}
|
|
||||||
role="tabpanel"
|
|
||||||
tabIndex="0"
|
|
||||||
>
|
|
||||||
{example ? example : (
|
|
||||||
<HighlightCode value="(no example available)" getConfigs={ getConfigs } />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
</ul>
|
||||||
{this.state.activeTab === "model" && (
|
{activeTab === tabs.example && (
|
||||||
<div
|
<div
|
||||||
aria-hidden={this.state.activeTab === "example"}
|
aria-hidden={activeTab !== tabs.example}
|
||||||
aria-labelledby={modelTabId}
|
aria-labelledby={exampleTabId}
|
||||||
data-name="modelPanel"
|
data-name="examplePanel"
|
||||||
id={modelPanelId}
|
id={examplePanelId}
|
||||||
role="tabpanel"
|
role="tabpanel"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
>
|
>
|
||||||
<ModelWrapper
|
{example ? (
|
||||||
schema={ schema }
|
example
|
||||||
getComponent={ getComponent }
|
) : (
|
||||||
getConfigs={ getConfigs }
|
<HighlightCode
|
||||||
specSelectors={ specSelectors }
|
value="(no example available)"
|
||||||
expandDepth={ defaultModelExpandDepth }
|
getConfigs={getConfigs}
|
||||||
specPath={specPath}
|
|
||||||
includeReadOnly = {includeReadOnly}
|
|
||||||
includeWriteOnly = {includeWriteOnly}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
)}
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
{activeTab === tabs.model && (
|
||||||
|
<div
|
||||||
|
aria-hidden={activeTab === tabs.example}
|
||||||
|
aria-labelledby={modelTabId}
|
||||||
|
data-name="modelPanel"
|
||||||
|
id={modelPanelId}
|
||||||
|
role="tabpanel"
|
||||||
|
tabIndex="0"
|
||||||
|
>
|
||||||
|
<ModelWrapper
|
||||||
|
schema={schema}
|
||||||
|
getComponent={getComponent}
|
||||||
|
getConfigs={getConfigs}
|
||||||
|
specSelectors={specSelectors}
|
||||||
|
expandDepth={defaultModelExpandDepth}
|
||||||
|
specPath={specPath}
|
||||||
|
includeReadOnly={includeReadOnly}
|
||||||
|
includeWriteOnly={includeWriteOnly}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ModelExample.propTypes = {
|
||||||
|
getComponent: PropTypes.func.isRequired,
|
||||||
|
specSelectors: PropTypes.shape({ isOAS3: PropTypes.func.isRequired })
|
||||||
|
.isRequired,
|
||||||
|
schema: PropTypes.object.isRequired,
|
||||||
|
example: PropTypes.any.isRequired,
|
||||||
|
isExecute: PropTypes.bool,
|
||||||
|
getConfigs: PropTypes.func.isRequired,
|
||||||
|
specPath: ImPropTypes.list.isRequired,
|
||||||
|
includeReadOnly: PropTypes.bool,
|
||||||
|
includeWriteOnly: PropTypes.bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModelExample
|
||||||
|
|||||||
Reference in New Issue
Block a user