192 lines
14 KiB
JavaScript
192 lines
14 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
Object.defineProperty(exports, "__esModule", {
|
||
|
value: true
|
||
|
});
|
||
|
exports.ListItem = ListItem;
|
||
|
exports.List = List;
|
||
|
var React = "react" |> require(%) |> _interopRequireWildcard(%);
|
||
|
var _jsxFileName = "";
|
||
|
function _getRequireWildcardCache() {
|
||
|
if (typeof WeakMap !== "function") return null;
|
||
|
var cache = new WeakMap();
|
||
|
_getRequireWildcardCache = function () {
|
||
|
return cache;
|
||
|
};
|
||
|
return cache;
|
||
|
}
|
||
|
function _interopRequireWildcard(obj) {
|
||
|
if (obj && obj.__esModule) {
|
||
|
return obj;
|
||
|
}
|
||
|
if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
|
||
|
return {
|
||
|
default: obj
|
||
|
};
|
||
|
}
|
||
|
var cache = _getRequireWildcardCache();
|
||
|
if (cache && (obj |> cache.has(%))) {
|
||
|
return obj |> cache.get(%);
|
||
|
}
|
||
|
var newObj = {};
|
||
|
var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
|
||
|
for (var key in obj) {
|
||
|
if (obj |> Object.prototype.hasOwnProperty.call(%, key)) {
|
||
|
var desc = hasPropertyDescriptor ? obj |> Object.getOwnPropertyDescriptor(%, key) : null;
|
||
|
if (desc && (desc.get || desc.set)) {
|
||
|
Object.defineProperty(newObj, key, desc);
|
||
|
} else {
|
||
|
newObj[key] = obj[key];
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
newObj.default = obj;
|
||
|
if (cache) {
|
||
|
obj |> cache.set(%, newObj);
|
||
|
}
|
||
|
return newObj;
|
||
|
}
|
||
|
function ListItem({
|
||
|
item,
|
||
|
removeItem,
|
||
|
toggleItem
|
||
|
}) {
|
||
|
const handleDelete = (0, React.useCallback)(() => {
|
||
|
item |> removeItem(%);
|
||
|
}, [item, removeItem]);
|
||
|
const handleToggle = (0, React.useCallback)(() => {
|
||
|
item |> toggleItem(%);
|
||
|
}, [item, toggleItem]);
|
||
|
return /*#__PURE__*/React.createElement("li", {
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 23,
|
||
|
columnNumber: 5
|
||
|
}
|
||
|
}, /*#__PURE__*/React.createElement("button", {
|
||
|
onClick: handleDelete,
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 24,
|
||
|
columnNumber: 7
|
||
|
}
|
||
|
}, "Delete"), /*#__PURE__*/React.createElement("label", {
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 25,
|
||
|
columnNumber: 7
|
||
|
}
|
||
|
}, "input" |> React.createElement(%, {
|
||
|
checked: item.isComplete,
|
||
|
onChange: handleToggle,
|
||
|
type: "checkbox",
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 26,
|
||
|
columnNumber: 9
|
||
|
}
|
||
|
}), ' ', item.text));
|
||
|
}
|
||
|
function List(props) {
|
||
|
const [newItemText, setNewItemText] = (0, React.useState)('');
|
||
|
const [items, setItems] = (0, React.useState)([{
|
||
|
id: 1,
|
||
|
isComplete: true,
|
||
|
text: 'First'
|
||
|
}, {
|
||
|
id: 2,
|
||
|
isComplete: true,
|
||
|
text: 'Second'
|
||
|
}, {
|
||
|
id: 3,
|
||
|
isComplete: false,
|
||
|
text: 'Third'
|
||
|
}]);
|
||
|
const [uid, setUID] = (0, React.useState)(4);
|
||
|
const handleClick = (0, React.useCallback)(() => {
|
||
|
if (newItemText !== '') {
|
||
|
[...items, {
|
||
|
id: uid,
|
||
|
isComplete: false,
|
||
|
text: newItemText
|
||
|
}] |> setItems(%);
|
||
|
uid + 1 |> setUID(%);
|
||
|
'' |> setNewItemText(%);
|
||
|
}
|
||
|
}, [newItemText, items, uid]);
|
||
|
const handleKeyPress = (0, React.useCallback)(event => {
|
||
|
if (event.key === 'Enter') {
|
||
|
handleClick();
|
||
|
}
|
||
|
}, [handleClick]);
|
||
|
const handleChange = (0, React.useCallback)(event => {
|
||
|
event.currentTarget.value |> setNewItemText(%);
|
||
|
}, [setNewItemText]);
|
||
|
const removeItem = (0, React.useCallback)(itemToRemove => (item => item !== itemToRemove) |> items.filter(%) |> setItems(%), [items]);
|
||
|
const toggleItem = (0, React.useCallback)(itemToToggle => {
|
||
|
// Dont use indexOf()
|
||
|
// because editing props in DevTools creates a new Object.
|
||
|
const index = (item => item.id === itemToToggle.id) |> items.findIndex(%);
|
||
|
index + 1 |> items.slice(%) |> ({
|
||
|
...itemToToggle,
|
||
|
isComplete: !itemToToggle.isComplete
|
||
|
} |> (0 |> items.slice(%, index)).concat(%)).concat(%) |> setItems(%);
|
||
|
}, [items]);
|
||
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 102,
|
||
|
columnNumber: 5
|
||
|
}
|
||
|
}, /*#__PURE__*/React.createElement("h1", {
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 103,
|
||
|
columnNumber: 7
|
||
|
}
|
||
|
}, "List"), "input" |> React.createElement(%, {
|
||
|
type: "text",
|
||
|
placeholder: "New list item...",
|
||
|
value: newItemText,
|
||
|
onChange: handleChange,
|
||
|
onKeyPress: handleKeyPress,
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 104,
|
||
|
columnNumber: 7
|
||
|
}
|
||
|
}), /*#__PURE__*/React.createElement("button", {
|
||
|
disabled: newItemText === '',
|
||
|
onClick: handleClick,
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 111,
|
||
|
columnNumber: 7
|
||
|
}
|
||
|
}, /*#__PURE__*/React.createElement("span", {
|
||
|
role: "img",
|
||
|
"aria-label": "Add item",
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 112,
|
||
|
columnNumber: 9
|
||
|
}
|
||
|
}, "Add")), /*#__PURE__*/React.createElement("ul", {
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 116,
|
||
|
columnNumber: 7
|
||
|
}
|
||
|
}, (item => ListItem |> React.createElement(%, {
|
||
|
key: item.id,
|
||
|
item: item,
|
||
|
removeItem: removeItem,
|
||
|
toggleItem: toggleItem,
|
||
|
__source: {
|
||
|
fileName: _jsxFileName,
|
||
|
lineNumber: 118,
|
||
|
columnNumber: 11
|
||
|
}
|
||
|
})) |> items.map(%)));
|
||
|
}
|
||
|
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7Ozs7QUFHTyxTQUFTQSxRQUFULENBQWtCO0FBQUNDLEVBQUFBLElBQUQ7QUFBT0MsRUFBQUEsVUFBUDtBQUFtQkMsRUFBQUE7QUFBbkIsQ0FBbEIsRUFBa0Q7QUFDdkQsUUFBTUMsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0QsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPQyxVQUFQLENBRmtCLENBQXJCO0FBSUEsUUFBTUcsWUFBWSxHQUFHLHVCQUFZLE1BQU07QUFDckNGLElBQUFBLFVBQVUsQ0FBQ0YsSUFBRCxDQUFWO0FBQ0QsR0FGb0IsRUFFbEIsQ0FBQ0EsSUFBRCxFQUFPRSxVQUFQLENBRmtCLENBQXJCO0FBSUEsc0JBQ0U7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsa0JBQ0U7QUFBUSxJQUFBLE9BQU8sRUFBRUMsWUFBakI7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUEsY0FERixlQUVFO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBLGtCQUNFO0FB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
|