shinkansen-cogs
Version:
109 lines (99 loc) • 2.32 kB
JSX
/**
* @typedef {CogsTypes.OnEventType} OnEventType
* @typedef {CogsTypes.Super.Components.Field.FieldProps} FieldProps
*/
/**
* Field component
*/
import React, { Component } from 'react'
import PropTypes from 'prop-types'
/**
* @type {OnEventType}
*/
function DEFAULT_HANDLE_EVENT () {
//
}
/**
* @extends {Component<FieldProps>}
*/
export default class Field extends Component {
getClassName () {
return 'input'
}
/**
* @param {{ target: { value?: string } }} event
* @returns {void}
*/
handleChange = ({ target: { value } }) => {
const {
onChange = DEFAULT_HANDLE_EVENT,
name
} = this.props
onChange(name, value)
}
/**
* @param {FieldProps} props
* @returns {boolean}
*/
shouldComponentUpdate (props) {
return (
(props.name !== this.props.name) ||
(props.id !== this.props.id) ||
(props.value !== this.props.value) ||
(props.required !== this.props.required) ||
(props.disabled !== this.props.disabled) ||
(props.readOnly !== this.props.readOnly) ||
(props.tabIndex !== this.props.tabIndex) ||
(props.accessKey !== this.props.accessKey) ||
(props.placeholder !== this.props.placeholder) ||
(props.onChange !== this.props.onChange)
)
}
render () {
const {
name,
id,
value,
required = false,
disabled = false,
readOnly = false,
tabIndex,
accessKey,
placeholder,
fieldRef
} = this.props
return (
<input
name={name}
id={id}
value={value}
required={required}
disabled={disabled}
readOnly={readOnly}
tabIndex={tabIndex}
accessKey={accessKey}
placeholder={placeholder}
onChange={this.handleChange}
className={this.getClassName()}
ref={fieldRef}
/>
)
}
}
Field.propTypes = {
name: PropTypes.string.isRequired,
id: PropTypes.string,
value: PropTypes.string,
required: PropTypes.bool,
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
tabIndex: PropTypes.number,
accessKey: PropTypes.string,
placeholder: PropTypes.string,
onChange: PropTypes.func,
fieldRef: PropTypes.shape({
current: PropTypes.shape({
value: PropTypes.string
})
})
}