import classNames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import KeyValueListInputItem from './KeyValueListInputItem'; import styles from './KeyValueListInput.css'; class KeyValueListInput extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { isFocused: false }; } // // Listeners onItemChange = (index, itemValue) => { const { name, value, onChange } = this.props; const newValue = [...value]; if (index == null) { newValue.push(itemValue); } else { newValue.splice(index, 1, itemValue); } onChange({ name, value: newValue }); }; onRemoveItem = (index) => { const { name, value, onChange } = this.props; const newValue = [...value]; newValue.splice(index, 1); onChange({ name, value: newValue }); }; onFocus = () => { this.setState({ isFocused: true }); }; onBlur = () => { this.setState({ isFocused: false }); const { name, value, onChange } = this.props; const newValue = value.reduce((acc, v) => { if (v.key || v.value) { acc.push(v); } return acc; }, []); if (newValue.length !== value.length) { onChange({ name, value: newValue }); } }; // // Render render() { const { className, value, keyPlaceholder, valuePlaceholder, hasError, hasWarning } = this.props; const { isFocused } = this.state; return (