112 lines
3.0 KiB
TypeScript
112 lines
3.0 KiB
TypeScript
import type { ChangeEvent } from 'react';
|
|
import type { FC } from '../../lib/teact/teact';
|
|
import React, { useRef, useState } from '../../lib/teact/teact';
|
|
|
|
const TestOrdered: FC<{}> = () => {
|
|
const [items, setItems] = useState<Record<string, number>>({ a: 1, b: 5, c: 10 });
|
|
const [value, setValue] = useState<number | undefined>();
|
|
const [isDesc, setIsDesc] = useState(false);
|
|
|
|
const insertData = (newValue: number) => {
|
|
const key = `key${Math.random()}`;
|
|
setItems((currentItems) => (
|
|
{ ...currentItems, [key]: newValue }
|
|
));
|
|
setValue(undefined);
|
|
};
|
|
|
|
const updateData = (key: string, newValue: number) => {
|
|
setItems({ ...items, [key]: newValue });
|
|
};
|
|
|
|
const deleteData = (key: string) => {
|
|
const newItems = { ...items };
|
|
delete newItems[key];
|
|
setItems(newItems);
|
|
};
|
|
|
|
const addSmalls = () => {
|
|
[-5, -10, -20].forEach(insertData);
|
|
};
|
|
|
|
const addBigs = () => {
|
|
[105, 110, 120].forEach(insertData);
|
|
};
|
|
|
|
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
setValue(Number(e.target.value));
|
|
};
|
|
|
|
const handleDescChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
setIsDesc(e.target.checked);
|
|
};
|
|
|
|
const sortedItems = Object
|
|
.entries(items)
|
|
.sort(([, value1], [, value2]) => (isDesc ? value2 - value1 : value1 - value2));
|
|
|
|
return (
|
|
<div id="mainContainer">
|
|
<div>
|
|
<p>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={isDesc}
|
|
onChange={handleDescChange}
|
|
/> — DESC
|
|
</label>
|
|
</p>
|
|
<p>
|
|
<input type="text" value={value} onChange={handleInputChange} />
|
|
<input type="submit" className="button" onClick={() => insertData(value || 0)} value="Insert Ordered" />
|
|
</p>
|
|
<p>
|
|
<input type="submit" className="button" onClick={addSmalls} value="Add Smalls" />
|
|
<input type="submit" className="button" onClick={addBigs} value="Add Bigs" />
|
|
</p>
|
|
</div>
|
|
<ul teactFastList>
|
|
{sortedItems.map(([key, itemValue]) => (
|
|
<MyComponent
|
|
teactOrderKey={itemValue}
|
|
key={key}
|
|
value={itemValue}
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
onChange={(newValue) => updateData(key, Number(newValue))}
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
onDelete={() => deleteData(key)}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function MyComponent({
|
|
value,
|
|
onChange,
|
|
onDelete,
|
|
}: {
|
|
value: number;
|
|
onChange: (newValue: string) => void;
|
|
onDelete: NoneToVoidFunction;
|
|
}) {
|
|
const id = useRef(String(Math.random()).slice(-3));
|
|
|
|
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
|
|
onChange(e.target.value);
|
|
};
|
|
|
|
return (
|
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
|
|
<li>
|
|
<input type="text" value={value} size={3} onChange={handleChange} />
|
|
<input type="button" value="x" onClick={onDelete} />
|
|
{id.current}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default TestOrdered;
|