Skip to content

Commit

Permalink
chore: cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@nnaydenow
nnaydenow committed Aug 7, 2024
1 parent 965f0cf commit cfa6ea5
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 57 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "my-react-ts2",
"private": true,
"version": "0.0.0",
"name": "ui5-webcomponents-sample-react",
"version": "0.7.0",
"homepage": "./",
"type": "module",
"scripts": {
"dev": "vite",
Expand Down
98 changes: 49 additions & 49 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import React, { useState, useRef, useEffect, useCallback } from "react";
import { useState, useRef, useEffect, useCallback } from "react";
import logo from "./logo.png";
import "./App.css";
import TodoList from "./TodoList";
import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";

import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme";
import "@ui5/webcomponents-base/dist/features/F6Navigation";
import "@ui5/webcomponents/dist/Button";
import "@ui5/webcomponents/dist/Title";
import "@ui5/webcomponents/dist/Input";
import "@ui5/webcomponents/dist/DatePicker";
import "@ui5/webcomponents/dist/List";
import "@ui5/webcomponents/dist/Label";
import "@ui5/webcomponents/dist/ListItemCustom";
import "@ui5/webcomponents/dist/Panel";
import "@ui5/webcomponents/dist/Dialog";
import "@ui5/webcomponents/dist/Popover";
import "@ui5/webcomponents/dist/Tab";
import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents/dist/TextArea";
import "@ui5/webcomponents/dist/Switch";
import "@ui5/webcomponents-fiori/dist/ShellBar";
import "@ui5/webcomponents-fiori/dist/ShellBarItem";
import "@ui5/webcomponents-fiori/dist/Assets";
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Title.js";
import "@ui5/webcomponents/dist/Input.js";
import "@ui5/webcomponents/dist/DatePicker.js";
import "@ui5/webcomponents/dist/List.js";
import "@ui5/webcomponents/dist/Label.js";
import "@ui5/webcomponents/dist/ListItemCustom.js";
import "@ui5/webcomponents/dist/Panel.js";
import "@ui5/webcomponents/dist/Dialog.js";
import "@ui5/webcomponents/dist/Popover.js";
import "@ui5/webcomponents/dist/Tab.js";
import "@ui5/webcomponents/dist/TabContainer.js";
import "@ui5/webcomponents/dist/TextArea.js";
import "@ui5/webcomponents/dist/Switch.js";
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
import "@ui5/webcomponents-fiori/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/palette.js";
import "@ui5/webcomponents-icons/dist/settings.js";
import "@ui5/webcomponents-icons/dist/sys-help.js";
Expand Down Expand Up @@ -119,9 +119,9 @@ function App() {
}
}, [editDialog]);

const handleProfileClick = useCallback((event: CustomEvent<ShellBarItemClickEventDetail>) => {
const handleProfileClick = useCallback((event: Event) => {
if (profilePopover.current) {
profilePopover.current.opener = event.detail.targetRef;
profilePopover.current.opener = (event as CustomEvent<ShellBarItemClickEventDetail>).detail.targetRef;
profilePopover.current.open = true;
}
}, []);
Expand All @@ -138,21 +138,21 @@ function App() {
}
}, []);

const handleRtlSwitchChange = useCallback((event: CustomEvent) => {
const handleRtlSwitchChange = useCallback((event: Event) => {
document.body.dir = (event.target as Switch).checked ? "rtl" : "ltr";
applyDirection();
}, []);

const handleContentDensitySwitchChange = useCallback((event: CustomEvent) => {
const handleContentDensitySwitchChange = useCallback((event: Event) => {
if ((event.target as Switch).checked) {
document.body.classList.add("ui5-content-density-compact");
} else {
document.body.classList.remove("ui5-content-density-compact");
}
}, []);

const handleProfileSettingsSelect = useCallback((event: CustomEvent<ListItemClickEventDetail>) => {
const selectedKey = event.detail.item.getAttribute("data-key");
const handleProfileSettingsSelect = useCallback((event: Event) => {
const selectedKey = (event as CustomEvent<ListItemClickEventDetail>).detail.item.getAttribute("data-key");
if (selectedKey === "settings") {
if (settingsDialog.current) {
settingsDialog.current.open = true;
Expand All @@ -164,15 +164,15 @@ function App() {
}
}, []);

const handleThemeSettingsToggle = useCallback((event: CustomEvent<ShellBarItemClickEventDetail>) => {
const handleThemeSettingsToggle = useCallback((event: Event) => {
if (themeSettingsPopover.current) {
themeSettingsPopover.current.opener = event.detail.targetRef;
themeSettingsPopover.current.opener = (event as CustomEvent<ShellBarItemClickEventDetail>).detail.targetRef;
themeSettingsPopover.current.open = true;
}
}, []);

const handleThemeChange = useCallback((event: CustomEvent<ListSelectionChangeEventDetail>) => {
const selectedTheme = event.detail.selectedItems[0].getAttribute("data-theme");
const handleThemeChange = useCallback((event: Event) => {
const selectedTheme = (event as CustomEvent<ListSelectionChangeEventDetail>).detail.selectedItems[0].getAttribute("data-theme")!;
setTheme(selectedTheme);
}, []);

Expand All @@ -196,8 +196,8 @@ function App() {
}, [todoBeingEditted, setTodos]);

const handleDone = useCallback(
(event: CustomEvent<ListSelectionChangeEventDetail>) => {
const selectedItem = event.detail.selectedItems[0];
(event: Event) => {
const selectedItem = (event as CustomEvent<ListSelectionChangeEventDetail>).detail.selectedItems[0];
const selectedId = selectedItem.getAttribute("data-key");

setTodos((todos) =>
Expand All @@ -210,8 +210,8 @@ function App() {
);

const handleUnDone = useCallback(
(event: CustomEvent<ListSelectionChangeEventDetail>) => {
const selectedItems = event.detail.selectedItems;
(event: Event) => {
const selectedItems = (event as CustomEvent<ListSelectionChangeEventDetail>).detail.selectedItems;

setTodos((todos) =>
todos.map((todo) => {
Expand Down Expand Up @@ -379,25 +379,25 @@ function App() {
<ui5-avatar slot="profile" size="XS" initials="JD"></ui5-avatar>
</ui5-shellbar>

<ui5-tabcontainer fixed collapsed>
<ui5-tabcontainer collapsed>
<ui5-tab text="My Todos"></ui5-tab>
</ui5-tabcontainer>

<section className="app-content">
<div className="create-todo-wrapper">
<ui5-input placeholder="Type a task..." ref={todoInput} className="add-todo-element-width" id="add-input"></ui5-input>
<ui5-date-picker format-pattern="dd/MM/yyyy" className="add-todo-element-width" ref={todoDeadline} id="date-picker"></ui5-date-picker>
<ui5-button className="add-todo-element-width" ref={addButton} design="Emphasized" id="add-button">
<ui5-input placeholder="Type a task..." ref={todoInput} class="add-todo-element-width" id="add-input"></ui5-input>
<ui5-date-picker format-pattern="dd/MM/yyyy" class="add-todo-element-width" ref={todoDeadline} id="date-picker"></ui5-date-picker>
<ui5-button class="add-todo-element-width" ref={addButton} design="Emphasized" id="add-button">
Add Todo
</ui5-button>
</div>

<div className="list-todos-wrapper">
<ui5-panel header-text="Incompleted Tasks" collapsed={!todos.filter((todo) => !todo.done).length || undefined} className="list-todos-panel">
<ui5-panel header-text="Incompleted Tasks" collapsed={!todos.filter((todo) => !todo.done).length || undefined} class="list-todos-panel">
<TodoList items={todos.filter((todo) => !todo.done)} selectionChange={handleDone} remove={handleRemove} edit={handleEdit}></TodoList>
</ui5-panel>

<ui5-panel header-text="Completed Tasks" collapsed={!todos.filter((todo) => todo.done).length || undefined} className="list-todos-panel" id="completed-tasks">
<ui5-panel header-text="Completed Tasks" collapsed={!todos.filter((todo) => todo.done).length || undefined} class="list-todos-panel" id="completed-tasks">
<TodoList items={todos.filter((todo) => todo.done)} selectionChange={handleUnDone} remove={handleRemove} edit={handleEdit}></TodoList>
</ui5-panel>
</div>
Expand All @@ -407,7 +407,7 @@ function App() {
<div className="dialog-content">
<div className="edit-wrapper">
<ui5-label>Title:</ui5-label>
<ui5-textarea className="title-textarea" max-length="24" show-exceeded-text value={todoBeingEditted.text} ref={titleEditInput}></ui5-textarea>
<ui5-textarea class="title-textarea" max-length="24" show-exceeded-text value={todoBeingEditted.text} ref={titleEditInput}></ui5-textarea>
</div>

<div className="edit-wrapper date-edit-fields">
Expand All @@ -417,19 +417,19 @@ function App() {
</div>

<div className="dialog-footer">
<ui5-button className="dialog-footer-btn--cancel" design="Transparent" ref={cancelBtn}>
<ui5-button class="dialog-footer-btn--cancel" design="Transparent" ref={cancelBtn}>
Cancel
</ui5-button>
{/*close dialog*/}
<ui5-button className="dialog-footer-btn--save" design="Emphasized" ref={saveBtn}>
<ui5-button class="dialog-footer-btn--save" design="Emphasized" ref={saveBtn}>
Save
</ui5-button>
{/*save dialog info*/}
</div>
</ui5-dialog>

<ui5-popover id="theme-settings-popover" className="app-bar-theming-popover" placement-type="Bottom" horizontal-align="Right" header-text="Theme">
<ui5-list ref={themeSelect} mode="SingleSelect">
<ui5-popover ref={themeSettingsPopover} class="app-bar-theming-popover" placement="Bottom" horizontal-align="End" header-text="Theme">
<ui5-list ref={themeSelect} selection-mode="Single">
<ui5-li icon="palette" data-theme="sap_horizon" selected>
SAP Horizon Morning
</ui5-li>
Expand Down Expand Up @@ -457,7 +457,7 @@ function App() {
</ui5-list>
</ui5-popover>

<ui5-popover ref={profilePopover} className="app-bar-profile-popover" placement-type="Bottom" horizontal-align="Right">
<ui5-popover ref={profilePopover} class="app-bar-profile-popover" placement="Bottom" horizontal-align="End">
<div className="profile-settings">
<ui5-avatar size="M" initials="JD"></ui5-avatar>
<div className="profile-text">
Expand All @@ -467,7 +467,7 @@ function App() {
</div>

<div className="profile-settings-list">
<ui5-list mode="SingleSelect" separators="None" ref={profileSettingsSelect}>
<ui5-list selection-mode="Single" separators="None" ref={profileSettingsSelect}>
<ui5-li icon="settings" data-key="settings">
Settings
</ui5-li>
Expand All @@ -485,15 +485,15 @@ function App() {
<div>
<div className="profile-rtl-switch centered">
<div className="profile-rtl-switch-title">
<ui5-label className="profile-rtl-switch-text">RTL</ui5-label>
<ui5-label class="profile-rtl-switch-text">RTL</ui5-label>
</div>
<ui5-switch ref={rtlSwitch}></ui5-switch>
</div>
</div>

<div className="profile-rtl-switch centered">
<div className="profile-rtl-switch-title">
<ui5-label className="profile-rtl-switch-text">Compact</ui5-label>
<ui5-label class="profile-rtl-switch-text">Compact</ui5-label>
</div>
<ui5-switch ref={contentDensitySwitch}></ui5-switch>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/TodoItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type Button from "@ui5/webcomponents/dist/Button.js";
import React, { useEffect, useRef } from "react";
import { useEffect, useRef } from "react";

type TODOItem = {
text: string;
Expand Down
4 changes: 2 additions & 2 deletions src/TodoList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { TODOItem } from "./App";

type TodoList = {
items: Array<TODOItem>;
selectionChange: () => void;
selectionChange: (event: Event) => void;
remove: (id: number) => void;
edit: (id: number) => void;
};
Expand All @@ -23,7 +23,7 @@ function TodoList({ items, selectionChange, remove, edit }: TodoList) {
}, [selectionChange]);

return (
<ui5-list id="todo-list" mode="MultiSelect" ref={list}>
<ui5-list id="todo-list" selection-mode="Multiple" ref={list}>
{items.map((todo) => {
return <TodoItem key={todo.id} id={todo.id} text={todo.text} deadline={todo.deadline} done={todo.done} handleDelete={remove} handleEdit={edit}></TodoItem>;
})}
Expand Down
4 changes: 2 additions & 2 deletions src/custom.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ import type Switch from "@ui5/webcomponents/dist/Switch.js";
import type Icon from "@ui5/webcomponents/dist/Icon.js";
import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js";

import { DOMAttributes } from "react";
import { DOMAttributes, useRef, Key } from "react";

type CustomElementAttrs<T> = DOMAttributes<T> & { key: string | number; ref: React.RefObject<T>; class: string };
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type CustomElement<T> = Partial<T & CustomElementAttrs<T> & { children: any }>;
type CustomElementAttrs<T> = DOMAttributes<T> & { key: Key; ref: ReturnType<typeof useRef<T>>; class: string };

declare global {
namespace JSX {
Expand Down

0 comments on commit cfa6ea5

Please sign in to comment.