|
@@ -1,4 +1,3 @@
|
|
-import logo from './logo.svg';
|
|
|
|
import './App.css';
|
|
import './App.css';
|
|
import { useEffect, useState } from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
|
|
@@ -260,58 +259,143 @@ const MySelect = ({ options = countries, value = 'YE', onChange }) => {
|
|
)
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
-// const PhoneBookEntry = ({ data: { name, phone } = { name: '', phone: '' },
|
|
|
|
-// onChange, //по изменению
|
|
|
|
-// onMoveUp, //сдвинуть вверх
|
|
|
|
-// onMoveDown,//сдвинуть вниз
|
|
|
|
-// onDelete, //удалить этот
|
|
|
|
-// onAdd }) => //добавить под ним еще один
|
|
|
|
-// <>
|
|
|
|
-// //тут отдавать в наружный onChange такой же объект как и data
|
|
|
|
-// <input value={name} onChange={....} />
|
|
|
|
-// //тут отдавать в наружный onChange такой же объект как и data
|
|
|
|
-// <input value={phone} onChange={....} />
|
|
|
|
-// <button onClick={onMoveUp}>^</button>
|
|
|
|
-// <button onClick={onMoveDown}>v</button>
|
|
|
|
-// <button onClick={onDelete}>x</button>
|
|
|
|
-// <button onClick={onAdd}>+</button>
|
|
|
|
-// </>
|
|
|
|
|
|
+const PhoneBookEntry = ({
|
|
|
|
+ data: { name, phone } = { name: '', phone: '' },
|
|
|
|
+ key='',
|
|
|
|
+ onChange, //по изменению
|
|
|
|
+ onMoveUp, //сдвинуть вверх
|
|
|
|
+ onMoveDown,//сдвинуть вниз
|
|
|
|
+ onDelete, //удалить этот
|
|
|
|
+ onAdd }) =>
|
|
|
|
+ <>
|
|
|
|
+ <input value={name} onChange={(e) => onChange({name:e.target.value, phone})} />
|
|
|
|
+ <input type="number" value={phone} onChange={(e) => onChange({name, phone:e.target.value})} />
|
|
|
|
+ <button onClick={() => onMoveUp()}>^</button>
|
|
|
|
+ <button onClick={()=>onMoveDown()}>v</button>
|
|
|
|
+ <button onClick={() => onDelete({name, phone, key})}>x</button>
|
|
|
|
+ <button onClick={() => onAdd()}>+</button>
|
|
|
|
+ <br/>
|
|
|
|
+ </>
|
|
|
|
|
|
-// const defaultPeople = [{ name: 'John', phone: '102' },
|
|
|
|
-// { name: 'Paul', phone: '103' }]
|
|
|
|
-// const PhoneBook = ({ people = defaultPeople,
|
|
|
|
-// onSave }) => {
|
|
|
|
-// const [ppl, setPpl] = useState(people)
|
|
|
|
-// const [keys, setKeys] = useState(people.map(() => Math.random()))
|
|
|
|
-// // const keys = useRef(people.map(() => Math.random()))
|
|
|
|
-// //должно меняться соответственно элементам списка - сдвигаться удаляться и тп
|
|
|
|
-// useEffect(() => {
|
|
|
|
-// setPpl(people)
|
|
|
|
-// //тут и keys обновить
|
|
|
|
-// }, [people])
|
|
|
|
-// //обеспечить для PhoneBookEntry:
|
|
|
|
-// // onChange, onMoveUp, onMoveDown, onDelete
|
|
|
|
-// const onChange = (newData, i) => { //{name: 'НАМЕ', phone: 'НУМБЕР'}
|
|
|
|
-// //создаем новый массив ppl на базе старого, заменяем один элемент и делаем setPpl
|
|
|
|
-// //ничего НЕ ДЕЛАЕМ с keys
|
|
|
|
-// }
|
|
|
|
-// const onDelete = (i) => { //фильтрует ppl и keys удаляя i-ый элемент
|
|
|
|
-// }
|
|
|
|
-// console.log(keys, ppl)
|
|
|
|
-// return (
|
|
|
|
-// <>
|
|
|
|
-// <button onClick={.....}>+</button> //ДОБАВЛЯЕТ В НАЧАЛО СПИСКА
|
|
|
|
-// <div className='PhoneBook'>
|
|
|
|
-// //по любым изменениям обновляем массив целиком на базе старого
|
|
|
|
-// //меняя один или несколько элементов
|
|
|
|
-// {ppl.map(data => <PhoneBookEntry data={data} key={ } //не забудьте keys
|
|
|
|
-// onChange={data => onChange(data, И)}
|
|
|
|
-// onDelete={() => onDelete(i)} />)}
|
|
|
|
-// </div>
|
|
|
|
-// <button onClick={() => onSave(ppl)}>Save</button>
|
|
|
|
-// </>
|
|
|
|
-// )
|
|
|
|
-// }
|
|
|
|
|
|
+const defaultPeople = [
|
|
|
|
+ { name: 'John', phone: '102' },
|
|
|
|
+ { name: 'Paul', phone: '103' },
|
|
|
|
+ { name: 'Bob', phone: '111' },
|
|
|
|
+ { name: 'Marshall', phone: '313' }
|
|
|
|
+]
|
|
|
|
+
|
|
|
|
+const PhoneBook = ({ people = defaultPeople,
|
|
|
|
+ onSave }) => {
|
|
|
|
+ const [ppl, setPpl] = useState(people)
|
|
|
|
+ const [keys, setKeys] = useState(people.map(() => Math.random()))
|
|
|
|
+ const [name, setName] = useState('')
|
|
|
|
+ const [phone, setPhone] = useState('')
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ setPpl(people)
|
|
|
|
+ setKeys(keys)
|
|
|
|
+ }, [keys, people])
|
|
|
|
+
|
|
|
|
+ const onChange = (newData, i) => {
|
|
|
|
+ let newPpl = []
|
|
|
|
+ ppl.forEach((item, index) => {
|
|
|
|
+ if(index === i) {
|
|
|
|
+ newPpl.push(newData)
|
|
|
|
+ } else {
|
|
|
|
+ newPpl.push(item)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ setPpl(newPpl)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const onAdd = (newData, i) => {
|
|
|
|
+ let newArr = []
|
|
|
|
+ ppl.forEach(item => newArr.push(item))
|
|
|
|
+
|
|
|
|
+ i === 'start'? newArr.unshift(newData) : newArr.splice(i+1, 0, newData)
|
|
|
|
+
|
|
|
|
+ setPpl(newArr)
|
|
|
|
+ keys.splice(i ,0, Math.random())
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const onDelete = (i) => {
|
|
|
|
+ setPpl(ppl.filter((item)=> item.name !== i.name && item.phone !== i.phone ))
|
|
|
|
+ keys.splice(i.key,1)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const onMoveUp = (index) => {
|
|
|
|
+ let newArr = []
|
|
|
|
+ ppl.forEach(item => newArr.push(item))
|
|
|
|
+
|
|
|
|
+ let temp = newArr[index]
|
|
|
|
+ let tempKey = keys[index]
|
|
|
|
+
|
|
|
|
+ if(index === 0) {
|
|
|
|
+ newArr[index] = newArr[newArr.length - 1]
|
|
|
|
+ newArr[newArr.length - 1] = temp
|
|
|
|
+
|
|
|
|
+ keys[index] = keys[0]
|
|
|
|
+ keys[0] = tempKey
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ newArr[index] = newArr[index - 1]
|
|
|
|
+ newArr[index - 1] = temp
|
|
|
|
+
|
|
|
|
+ keys[index] = keys[index - 1]
|
|
|
|
+ keys[index - 1] = tempKey
|
|
|
|
+ }
|
|
|
|
+ setPpl(newArr)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const onMoveDown = (index) => {
|
|
|
|
+ let newArr = []
|
|
|
|
+ ppl.forEach(item => newArr.push(item))
|
|
|
|
+
|
|
|
|
+ let temp = newArr[index]
|
|
|
|
+ let tempKey = keys[index]
|
|
|
|
+
|
|
|
|
+ if(index === newArr.length - 1) {
|
|
|
|
+ newArr[index] = newArr[0]
|
|
|
|
+ newArr[0] = temp
|
|
|
|
+
|
|
|
|
+ keys[index] = keys[0]
|
|
|
|
+ keys[0] = tempKey
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ newArr[index] = newArr[index + 1]
|
|
|
|
+ newArr[index + 1] = temp
|
|
|
|
+
|
|
|
|
+ keys[index] = keys[index + 1]
|
|
|
|
+ keys[index + 1] = tempKey
|
|
|
|
+ }
|
|
|
|
+ setPpl(newArr)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ console.log('keys',keys)
|
|
|
|
+ console.log('people',ppl)
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <>
|
|
|
|
+ <input placeholder='name to add' value={name} onChange={e => setName(e.target.value)}/>
|
|
|
|
+ <input type="number" placeholder='phone to add' value={phone} onChange={e => setPhone(e.target.value)}/>
|
|
|
|
+ <button onClick = {() => onAdd({name, phone}, 'start')}>+</button>
|
|
|
|
+
|
|
|
|
+ <div className='PhoneBook'>
|
|
|
|
+ {ppl.map((data,index) => <PhoneBookEntry
|
|
|
|
+ data={data}
|
|
|
|
+ key={index}
|
|
|
|
+ onChange={(data) => onChange(data, index)}
|
|
|
|
+ onDelete={() => onDelete(data)}
|
|
|
|
+ onAdd={() => onAdd({name, phone}, index)}
|
|
|
|
+ onMoveDown={() => onMoveDown(index)}
|
|
|
|
+ onMoveUp={() => onMoveUp(index)}
|
|
|
|
+ />)
|
|
|
|
+ }
|
|
|
|
+ </div>
|
|
|
|
+ <button onClick={() => console.log(ppl)}>Save</button>
|
|
|
|
+ </>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
function App() {
|
|
function App() {
|
|
@@ -325,6 +409,7 @@ function App() {
|
|
onChange={item => setCode(item)}
|
|
onChange={item => setCode(item)}
|
|
/>
|
|
/>
|
|
<h2>{code}</h2>
|
|
<h2>{code}</h2>
|
|
|
|
+ <PhoneBook />
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
}
|
|
}
|