-
+
+
+ )
+ }
+}
diff --git a/packages/app/src/pages/account/components/editor/index.less b/packages/app/src/components/AdminTools/UserDataManager/index.less
similarity index 95%
rename from packages/app/src/pages/account/components/editor/index.less
rename to packages/app/src/components/AdminTools/UserDataManager/index.less
index 9f83c10c..08713209 100644
--- a/packages/app/src/pages/account/components/editor/index.less
+++ b/packages/app/src/components/AdminTools/UserDataManager/index.less
@@ -23,6 +23,7 @@
padding: 20px 0 20px 0;
background-color: rgba(221, 221, 221, 0.5);
backdrop-filter: blur(2px);
+ --webkit-backdrop-filter: blur(2px);
border-radius: 18px 18px 0 0;
transition: all 0.3s ease-in-out;
diff --git a/packages/app/src/components/AdminTools/UserRolesManager/index.jsx b/packages/app/src/components/AdminTools/UserRolesManager/index.jsx
new file mode 100644
index 00000000..5e411ccc
--- /dev/null
+++ b/packages/app/src/components/AdminTools/UserRolesManager/index.jsx
@@ -0,0 +1,140 @@
+import React from "react"
+import * as antd from "antd"
+
+import { ActionsBar, UserSelector, Skeleton } from "components"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+export default class UserRolesManager extends React.Component {
+ state = {
+ users: null,
+ roles: null,
+ }
+
+ api = window.app.request
+
+ componentDidMount = async () => {
+ await this.fetchRoles()
+
+ if (typeof this.props.id !== "undefined") {
+ const ids = Array.isArray(this.props.id) ? this.props.id : [this.props.id]
+ await this.fetchUsersData(ids)
+ }
+ }
+
+ fetchRoles = async () => {
+ const result = await this.api.get.roles().catch((err) => {
+ antd.message.error(err)
+ console.error(err)
+ return false
+ })
+
+ if (result) {
+ this.setState({ roles: result })
+ }
+ }
+
+ fetchUsersData = async (users) => {
+ const result = await this.api.get.users(undefined, { _id: users }).catch((err) => {
+ antd.message.error(err)
+ console.error(err)
+ return false
+ })
+
+ if (result) {
+ this.setState({
+ users: result.map((data) => {
+ return {
+ _id: data._id,
+ username: data.username,
+ roles: data.roles,
+ }
+ })
+ })
+ }
+ }
+
+ handleSelectUser = async (users) => {
+ this.fetchUsersData(users)
+ }
+
+ handleRoleChange = (userId, role, to) => {
+ let updatedUsers = this.state.users.map((user) => {
+ if (user._id === userId) {
+ if (to == true) {
+ user.roles.push(role)
+ } else {
+ user.roles = user.roles.filter((r) => r !== role)
+ }
+ }
+
+ return user
+ })
+
+ this.setState({ users: updatedUsers })
+ }
+
+ handleSubmit = async () => {
+ const update = this.state.users.map((data) => {
+ return {
+ _id: data._id,
+ roles: data.roles,
+ }
+ })
+
+ const result = await this.api.post.updateUserRoles({ update }).catch((err) => {
+ antd.message.error(err)
+ console.error(err)
+ return false
+ })
+
+ if (result) {
+ this.props.handleDone(result)
+ if (typeof this.props.close === "function") {
+ this.props.close()
+ }
+ }
+ }
+
+ renderItem = (item) => {
+ return
-
+
- 
+ return close()}>
+
+
}
export function openModal() {
const component = document.createElement("div")
document.body.appendChild(component)
- ReactDOM.render(
+
+
-
+ }
+ >
+
+
{config.app.siteName}
+ {config.author}
-
+ {isProduction ?
{appConfig.siteName}
-
-
-
- {eviteNamespace.eviteVersion &&
- eVite v{eviteNamespace?.eviteVersion} }
- {eviteNamespace.version?.node &&
- }
-
- {isDevMode ?
-
+
+
+
-
- )
- }
+
+
+
+
+
+
+
+
+ eVite v{window.__eviteVersion ?? "experimental"}
+
+
-
+
+
+
+}
+
+//@evite-components#OperatorsAssignments*mobile/desktop
+export default class AddableSelectList extends React.Component {
+ state = {
+ selectedKeys: [],
+ selectedItems: [],
+ }
+
+ onClickAdd = async () => {
+ window.app.DrawerController.open("AddableSelectListSelector", AddableSelectListSelector, {
+ onDone: async (ctx, keys, data) => {
+ if (keys.length <= 0) {
+ ctx.close()
+ return false
+ }
+
+ let { selectedKeys, selectedItems } = this.state
+
+ selectedKeys = [...selectedKeys, ...keys]
+ selectedItems = [...selectedItems, ...data]
+
+ await this.setState({ selectedKeys: selectedKeys, selectedItems: selectedItems })
+
+ if (typeof this.props.onSelectItem === "function") {
+ await this.props.onSelectItem(keys)
+ }
+
+ ctx.close()
+ },
+ componentProps: {
+ loadData: this.props.loadData,
+ searcherKeys: this.props.searcherKeys,
+ debounceSearchWait: this.props.debounceSearchWait,
+ excludedIds: this.state.selectedKeys,
+ excludedSelectedKeys: this.props.excludedSelectedKeys,
+ },
+ })
+ }
+
+ onClickItem = async (item) => {
+ if (typeof this.props.onClickItem === "function") {
+ await this.props.onClickItem(item)
+ }
+ }
+
+ onDeleteItem = async (item) => {
+ if (typeof this.props.onDeleteItem === "function") {
+ await this.props.onDeleteItem(item)
+ }
+
+ const { selectedKeys, selectedItems } = this.state
+
+ const newSelectedKeys = selectedKeys.filter((key) => {
+ return key !== item._id
+ })
+
+ const newSelectedItems = selectedItems.filter((_item) => {
+ return _item._id !== item._id
+ })
+
+ this.setState({ selectedKeys: newSelectedKeys, selectedItems: newSelectedItems })
+ }
+
+ render() {
+ return
+
+ return
+}
+
+export const AddableSelectListItem = (props) => {
+ const { item, actions, onClick, onDelete } = props
+
+ const handleClick = () => {
+ if (typeof onClick === "function") {
+ onClick(item)
+ }
+ }
+
+ const handleDelete = () => {
+ if (typeof onDelete === "function") {
+ onDelete(item)
+ }
+ }
+
+ return
+
diff --git a/packages/app/src/components/ActionsBar/index.less b/packages/app/src/components/ActionsBar/index.less
index 2eed8f70..4612d359 100644
--- a/packages/app/src/components/ActionsBar/index.less
+++ b/packages/app/src/components/ActionsBar/index.less
@@ -1,6 +1,7 @@
@actionsBar_height: fit-content;
-.actionsBar_card {
+.actionsBar {
+ --ignore-dragger: true;
display: inline-block;
white-space: nowrap;
@@ -15,7 +16,9 @@
border-radius: 8px;
background-color: #0c0c0c15;
+
backdrop-filter: blur(10px);
+ --webkit-backdrop-filter: blur(10px);
transition: all 200ms ease-in-out;
@@ -28,6 +31,28 @@
z-index: 0;
}
+ .wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ height: 100%;
+ transition: all 200ms ease-in-out;
+
+ > div {
+ margin: 0 5px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ --ignore-dragger: true;
+
+ span {
+ height: fit-content;
+ }
+ }
+ }
+
&.float {
z-index: 1000;
position: sticky;
@@ -56,20 +81,20 @@
width: 100%;
margin-bottom: 10px;
}
-}
-.actionsBar_flexWrapper {
- display: flex;
- flex-direction: row;
- align-items: center;
+ &.transparent {
+ background-color: transparent;
+ border: none;
+ backdrop-filter: none;
+ --webkit-backdrop-filter: none;
+ }
- height: 100%;
- transition: all 200ms ease-in-out;
-
- > div {
- margin: 0 5px;
- display: flex;
- flex-direction: column;
- align-items: center;
+ &.spaced {
+ .wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
}
}
diff --git a/packages/app/src/components/AddableSelectList/index.jsx b/packages/app/src/components/AddableSelectList/index.jsx
new file mode 100644
index 00000000..4f664c4f
--- /dev/null
+++ b/packages/app/src/components/AddableSelectList/index.jsx
@@ -0,0 +1,258 @@
+import React from "react"
+import * as antd from "antd"
+import { PullToRefresh } from "antd-mobile"
+import { Icons } from "components/Icons"
+import { SelectableList, SwipeItem, Skeleton } from "components"
+import { debounce } from "lodash"
+import fuse from "fuse.js"
+
+import "./index.less"
+
+const statusRecord = {
+ pulling: "Slide down to refresh",
+ canRelease: "Release",
+ refreshing:
{children}
+ {
+ return
+ Done
+
+ ]}
+ events={{
+ onDone: (ctx, keys) => props.handleDone(keys, keys.map((key) => findData(key))),
+ }}
+ disabledKeys={props.excludedIds}
+ renderItem={(item) => {
+ return
+
+
+
+ {statusRecord[status]}
+ }}
+ onRefresh={fetchData}
+ >
+
+
+ }}
+ />
+
+ {item.label}
+
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/AddableSelectList/index.less b/packages/app/src/components/AddableSelectList/index.less
new file mode 100644
index 00000000..5d99bd48
--- /dev/null
+++ b/packages/app/src/components/AddableSelectList/index.less
@@ -0,0 +1,45 @@
+.addableSelectListSelector {
+ > div {
+ margin-bottom: 10px;
+ }
+
+ .item {
+ h1 {
+ margin: 0;
+ }
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 100%;
+
+ > div {
+ margin-right: 10px;
+ }
+ }
+}
+
+.addableSelectList {
+ #delete {
+ border-radius: 4px;
+ }
+
+ .item {
+ background-color: var(--background-color-primary);
+ }
+
+ .actions {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
+ > div {
+ margin-right: 6px;
+ }
+ }
+
+ > div {
+ margin-bottom: 10px;
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/AdminTools/UserDataManager/index.jsx b/packages/app/src/components/AdminTools/UserDataManager/index.jsx
new file mode 100644
index 00000000..8371df59
--- /dev/null
+++ b/packages/app/src/components/AdminTools/UserDataManager/index.jsx
@@ -0,0 +1,204 @@
+import React from "react"
+import * as antd from "antd"
+import debounce from "lodash/debounce"
+import { Translation } from "react-i18next"
+
+import { ActionsBar } from "components"
+import { Icons } from "components/Icons"
+
+import "./index.less"
+
+export const EditAccountField = ({ id, component, props, header, handleChange, delay, defaultValue, allowEmpty }) => {
+ const [currentValue, setCurrentValue] = React.useState(defaultValue)
+ const [emittedValue, setEmittedValue] = React.useState(null)
+
+ const debouncedHandleChange = React.useCallback(
+ debounce((value) => handleChange({ id, value }), delay ?? 300),
+ [],
+ )
+
+ const handleDiscard = (event) => {
+ if (typeof event !== "undefined") {
+ event.target.blur()
+ }
+
+ setCurrentValue(defaultValue)
+ handleChange({ id, value: defaultValue })
+ }
+
+ React.useEffect(() => {
+ debouncedHandleChange(currentValue)
+ }, [emittedValue])
+
+ const onChange = (event) => {
+ event.persist()
+ let { value } = event.target
+
+ if (typeof value === "string") {
+ if (value.length === 0) {
+ // if is not allowed to be empty, discard modifications
+ if (!allowEmpty) {
+ return handleDiscard(event)
+ }
+ }
+ }
+
+ setCurrentValue(value)
+ setEmittedValue(value)
+ }
+
+ const handleKeyDown = (event) => {
+ if (event.keyCode === 27) {
+ // "escape" pressed, reset to default value
+ handleDiscard(event)
+ }
+ }
+
+ const RenderComponent = component
+
+ return (
+
+ {
+ return this.onClickItem(item)}
+ onDelete={() => { this.onDeleteItem(item) }}
+ />
+ }}
+ />
+
+
+
+
+
+
+ {header ? header : null}
+
+ )
+}
+
+export default class UserDataManager extends React.Component {
+ state = {
+ data: this.props.user,
+ changes: [],
+ loading: false,
+ }
+
+ api = window.app.request
+
+ componentDidMount = async () => {
+ if (!this.props.user && this.props.userId) {
+ // TODO: Fetch from API
+ }
+ }
+
+ handleSave = async () => {
+ if (!Array.isArray(this.state.changes)) {
+ antd.message.error("Something went wrong")
+ console.error("Changes should be an array")
+ return false
+ }
+
+ await this.setState({ loading: true })
+ const update = {}
+
+ this.state.changes.forEach((change) => {
+ update[change.id] = change.value
+ })
+
+ const result = await this.api.post.updateUser({ _id: this.state.data._id, update }).catch((err) => {
+ antd.message.error(err.message)
+ console.error(err)
+ return false
+ })
+
+ await this.setState({ changes: [], loading: false })
+
+ if (typeof this.props.onSave === "function") {
+ await this.props.onSave(this.state.changes)
+ }
+
+ if (result) {
+ if (typeof this.props.handleDone === "function") {
+ this.props.handleDone(result)
+ }
+ }
+ }
+
+ handleChange = (event) => {
+ const { id, value } = event
+ let changes = [...this.state.changes]
+
+ changes = changes.filter((change) => change.id !== id)
+
+ if (this.state.data[id] !== value) {
+ changes.push({ id, value })
+ }
+
+ this.setState({ changes })
+ }
+
+ render() {
+ return (
+
+
+
+ }
+ component={antd.Input}
+ props={{
+ placeholder: "Your email address",
+ type: "email",
+ }}
+ handleChange={this.handleChange}
+ />
+
+
+
+ }
+ component={antd.Input}
+ props={{
+ placeholder: "Your full name",
+ }}
+ handleChange={this.handleChange}
+ />
+
+
+
+
+
+ }
+ component={antd.Input}
+ props={{
+ placeholder: "Username",
+ disabled: true,
+ }}
+ handleChange={this.handleChange}
+ />
+
+
+
+ {this.state.changes.length}
+ {(t) => t("Changes")}
+
+
+
+
+
+ {(t) => t("Save")}
+
+
+
+
+
+
+
+ }
+
+ render() {
+ const { users } = this.state
+
+ if (!users) {
+ return
+
+
+ {this.state.roles.map((role) => {
+ return this.handleRoleChange(item._id, role.name, to.target.checked)}
+ >
+ {role.name}
+
+ })}
+
+
+ {users.map((data) => {
+ return this.renderItem(data)
+ })}
+
+
+
+
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/AdminTools/UserRolesManager/index.less b/packages/app/src/components/AdminTools/UserRolesManager/index.less
new file mode 100644
index 00000000..bd373174
--- /dev/null
+++ b/packages/app/src/components/AdminTools/UserRolesManager/index.less
@@ -0,0 +1,19 @@
+.grantRoles_user {
+ display: flex;
+ flex-direction: column;
+
+ .roles {
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ padding: 10px;
+ border-radius: 8px;
+
+ background-color: var(--background-color-accent);
+ }
+
+ > div {
+ margin-bottom: 10px;
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/AdminTools/index.js b/packages/app/src/components/AdminTools/index.js
new file mode 100644
index 00000000..a570f549
--- /dev/null
+++ b/packages/app/src/components/AdminTools/index.js
@@ -0,0 +1,41 @@
+import UserDataManager from "./UserDataManager"
+import UserRolesManager from "./UserRolesManager"
+
+export { UserDataManager, UserRolesManager }
+
+export const open = {
+ dataManager: (user) => {
+ return new Promise((resolve, reject) => {
+ window.app.DrawerController.open("UserDataManager", UserDataManager, {
+ componentProps: {
+ user: user,
+ },
+ onDone: (ctx, value) => {
+ resolve(value)
+ ctx.close()
+ },
+ onFail: (ctx, value) => {
+ reject(value)
+ ctx.close()
+ }
+ })
+ })
+ },
+ rolesManager: (id) => {
+ return new Promise((resolve, reject) => {
+ window.app.DrawerController.open("UserRolesManager", UserRolesManager, {
+ componentProps: {
+ id: id,
+ },
+ onDone: (ctx, value) => {
+ resolve(value)
+ ctx.close()
+ },
+ onFail: (ctx, value) => {
+ reject(value)
+ ctx.close()
+ }
+ })
+ })
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/AppSearcher/index.jsx b/packages/app/src/components/AppSearcher/index.jsx
index 79658f54..41a6eb39 100644
--- a/packages/app/src/components/AppSearcher/index.jsx
+++ b/packages/app/src/components/AppSearcher/index.jsx
@@ -32,7 +32,6 @@ export default class AppSearcher extends React.Component {
let results = []
// get results
- console.log(value)
results.push({ id: value, title: value })
// storage results
diff --git a/packages/app/src/components/AppSearcher/index.less b/packages/app/src/components/AppSearcher/index.less
index 0f8de6c9..45519141 100644
--- a/packages/app/src/components/AppSearcher/index.less
+++ b/packages/app/src/components/AppSearcher/index.less
@@ -2,6 +2,7 @@
.search_bar {
user-select: none;
+ --webkit-user-select: none;
height: fit-content;
border: 0;
@@ -9,16 +10,16 @@
vertical-align: middle !important;
.ant-input {
- background-color: var(--background-color-accent)!important;
- border-color: var(--background-color-accent)!important;
- color: var(--background-color-contrast)!important;
+ background-color: var(--background-color-accent) !important;
+ border-color: var(--background-color-accent) !important;
+ color: var(--background-color-contrast) !important;
}
.ant-input-group {
display: flex;
- align-items: center;
- justify-content: center;
- height: fit-content;
+ align-items: center;
+ justify-content: center;
+ height: fit-content;
}
.ant-input-group-addon {
@@ -27,7 +28,7 @@
}
.ant-btn {
- background-color: var(--background-color-primary)!important;
+ background-color: var(--background-color-primary) !important;
border: 0 !important;
}
}
diff --git a/packages/app/src/components/Crash/index.jsx b/packages/app/src/components/Crash/index.jsx
new file mode 100644
index 00000000..776c6118
--- /dev/null
+++ b/packages/app/src/components/Crash/index.jsx
@@ -0,0 +1,23 @@
+import React from "react"
+import { Result, Button } from "antd"
+
+export default (props) => {
+ const { crash } = props
+
+ return
+
+
+ window.location.reload()}>
+ Reload app
+
+ ]}
+ >
+
+
+}
\ No newline at end of file
diff --git a/packages/app/src/components/DraggableDrawer/helpers.js b/packages/app/src/components/DraggableDrawer/helpers.js
new file mode 100644
index 00000000..22b65f42
--- /dev/null
+++ b/packages/app/src/components/DraggableDrawer/helpers.js
@@ -0,0 +1,15 @@
+export function isDirectionTop(direction) {
+ return direction === "top";
+}
+
+export function isDirectionBottom(direction) {
+ return direction === "bottom";
+}
+
+export function isDirectionLeft(direction) {
+ return direction === "left";
+}
+
+export function isDirectionRight(direction) {
+ return direction === "right";
+}
\ No newline at end of file
diff --git a/packages/app/src/components/DraggableDrawer/index.jsx b/packages/app/src/components/DraggableDrawer/index.jsx
new file mode 100644
index 00000000..3f3a8e01
--- /dev/null
+++ b/packages/app/src/components/DraggableDrawer/index.jsx
@@ -0,0 +1,442 @@
+// © Jack Hanford https://github.com/hanford/react-drag-drawer
+import React, { Component } from "react";
+import { Motion, spring, presets } from "react-motion";
+import PropTypes from "prop-types";
+import document from "global/document";
+import Observer from "react-intersection-observer";
+import { css } from "@emotion/css";
+import { createPortal } from "react-dom";
+
+import {
+ isDirectionBottom,
+ isDirectionTop,
+ isDirectionLeft,
+ isDirectionRight,
+} from "./helpers.js"
+
+export default class Drawer extends Component {
+ static propTypes = {
+ open: PropTypes.bool.isRequired,
+ children: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.array,
+ PropTypes.element
+ ]),
+ onRequestClose: PropTypes.func,
+ onDrag: PropTypes.func,
+ onOpen: PropTypes.func,
+ inViewportChange: PropTypes.func,
+ allowClose: PropTypes.bool,
+ notifyWillClose: PropTypes.func,
+ direction: PropTypes.string,
+ modalElementClass: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string
+ ]),
+ containerOpacity: PropTypes.number,
+ containerElementClass: PropTypes.string,
+ getContainerRef: PropTypes.func,
+ getModalRef: PropTypes.func
+ }
+
+ static defaultProps = {
+ notifyWillClose: () => { },
+ onOpen: () => { },
+ onDrag: () => { },
+ inViewportChange: () => { },
+ onRequestClose: () => { },
+ getContainerRef: () => { },
+ getModalRef: () => { },
+ containerOpacity: 0.6,
+ direction: "bottom",
+ parentElement: document.body,
+ allowClose: true,
+ dontApplyListeners: false,
+ containerElementClass: "",
+ modalElementClass: ""
+ }
+
+ state = {
+ ignore: false,
+ onRange: false,
+ open: this.props.open,
+ thumb: 0,
+ start: 0,
+ position: 0,
+ touching: false,
+ listenersAttached: false
+ }
+
+ DRAGGER_HEIGHT_SIZE = 100
+ MAX_NEGATIVE_SCROLL = 5
+ SCROLL_TO_CLOSE = 475
+ ALLOW_DRAWER_TRANSFORM = true
+
+ componentDidUpdate(prevProps, nextState) {
+ // in the process of closing the drawer
+ if (!this.props.open && prevProps.open) {
+ this.removeListeners()
+
+ setTimeout(this.setState({ open: false }), 300)
+ }
+
+ if (this.drawer) {
+ this.getNegativeScroll(this.drawer)
+ }
+
+ // in the process of opening the drawer
+ if (this.props.open && !prevProps.open) {
+ this.props.onOpen()
+
+ this.setState({ open: true })
+ }
+ }
+
+ componentWillUnmount() {
+ this.removeListeners()
+ }
+
+ attachListeners = drawer => {
+ const { dontApplyListeners, getModalRef, direction } = this.props
+ const { listenersAttached } = this.state
+
+ // only attach listeners once as this function gets called every re-render
+ if (!drawer || listenersAttached || dontApplyListeners) return
+
+ this.drawer = drawer
+
+ getModalRef(drawer)
+
+ this.drawer.addEventListener("touchend", this.release)
+ this.drawer.addEventListener("touchmove", this.drag)
+ this.drawer.addEventListener("touchstart", this.tap)
+
+ let position = 0
+
+ if (isDirectionRight(direction)) {
+ position = drawer.scrollWidth
+ }
+
+ this.setState({ listenersAttached: true, position }, () => {
+ setTimeout(() => {
+ // trigger reflow so webkit browsers calculate height properly 😔
+ // https://bugs.webkit.org/show_bug.cgi?id=184905
+ this.drawer.style.display = "none"
+ void this.drawer.offsetHeight
+ this.drawer.style.display = ""
+ }, 300)
+ })
+ }
+
+ isThumbInDraggerRange = (event) => {
+ return (event.touches[0].clientY - this.drawer.getBoundingClientRect().top) < this.DRAGGER_HEIGHT_SIZE
+ }
+
+ removeListeners = () => {
+ if (!this.drawer) {
+ return false
+ }
+
+ this.drawer.removeEventListener("touchend", this.release)
+ this.drawer.removeEventListener("touchmove", this.drag)
+ this.drawer.removeEventListener("touchstart", this.tap)
+
+ this.setState({ listenersAttached: false })
+ }
+
+ tap = event => {
+ const { pageY, pageX } = event.touches[0]
+ const shouldIgnored = Boolean(event.target.getAttribute("ignore-dragger") || (window.getComputedStyle(event.target).getPropertyValue("--ignore-dragger") !== ""))
+
+ const start = isDirectionBottom(this.props.direction) || isDirectionTop(this.props.direction) ? pageY : pageX
+
+ // reset NEW_POSITION and MOVING_POSITION
+ this.NEW_POSITION = 0
+ this.MOVING_POSITION = 0
+
+ this.setState({ ignore: shouldIgnored, onRange: this.isThumbInDraggerRange(event), thumb: start, start: start, touching: true })
+ }
+
+ drag = event => {
+ if (this.state.ignore) {
+ return false
+ }
+
+ const { direction } = this.props
+ const { thumb, position } = this.state
+ const { pageY, pageX } = event.touches[0]
+
+ const movingPosition = isDirectionBottom(direction) || isDirectionTop(direction) ? pageY : pageX
+ const delta = movingPosition - thumb
+ const newPosition = isDirectionBottom(direction) ? position + delta : position - delta
+
+ if (newPosition > 0 && this.ALLOW_DRAWER_TRANSFORM) {
+ // stop android's pull to refresh behavior
+ event.preventDefault()
+
+ this.props.onDrag({ newPosition })
+
+ // we set this, so we can access it in shouldWeCloseDrawer. Since setState is async, we're not guranteed we'll have the
+ // value in time
+ this.MOVING_POSITION = movingPosition
+ this.NEW_POSITION = newPosition
+
+ let positionThreshold = 0
+
+ if (isDirectionRight(direction)) {
+ positionThreshold = this.drawer.scrollWidth
+ }
+
+ if (newPosition < positionThreshold && this.shouldWeCloseDrawer()) {
+ this.props.notifyWillClose(true)
+ } else {
+ this.props.notifyWillClose(false)
+ }
+
+ // not at the bottom
+ if (this.NEGATIVE_SCROLL < newPosition) {
+ this.setState({
+ thumb: movingPosition,
+ position:
+ positionThreshold > 0
+ ? Math.min(newPosition, positionThreshold)
+ : newPosition
+ })
+ }
+ }
+ }
+
+ release = (event) => {
+ const { direction } = this.props
+
+ this.setState({ touching: false })
+
+ if (this.shouldWeCloseDrawer() && this.state.onRange) {
+ this.props.onRequestClose(this)
+ } else {
+ let newPosition = 0
+
+ if (isDirectionRight(direction)) {
+ newPosition = this.drawer.scrollWidth
+ }
+
+ this.setState({ position: newPosition })
+ }
+ }
+
+ getNegativeScroll = (element) => {
+ const { direction } = this.props
+ const size = this.getElementSize()
+
+ if (isDirectionBottom(direction) || isDirectionTop(direction)) {
+ this.NEGATIVE_SCROLL = size - element.scrollHeight - this.MAX_NEGATIVE_SCROLL
+ } else {
+ this.NEGATIVE_SCROLL = size - element.scrollWidth - this.MAX_NEGATIVE_SCROLL
+ }
+ }
+
+ hideDrawer = () => {
+ const { allowClose, direction } = this.props
+
+ let defaultPosition = 0
+
+ if (isDirectionRight(direction)) {
+ defaultPosition = this.drawer.scrollWidth
+ }
+
+ if (allowClose === false) {
+ // if we aren't going to allow close, let's animate back to the default position
+ return this.setState({
+ position: defaultPosition,
+ thumb: 0,
+ touching: false
+ })
+ }
+
+ this.setState({
+ open: false,
+ position: defaultPosition,
+ touching: false
+ })
+
+ // cleanup
+ this.removeListeners()
+ }
+
+ shouldWeCloseDrawer = () => {
+ const { start: touchStart } = this.state
+ const { direction } = this.props
+
+ let initialPosition = 0
+
+ if (isDirectionRight(direction)) {
+ initialPosition = this.drawer.scrollWidth
+ }
+
+ if (this.MOVING_POSITION === initialPosition) return false
+
+ if (isDirectionRight(direction)) {
+ return (
+ this.NEW_POSITION < initialPosition &&
+ this.MOVING_POSITION - touchStart > this.SCROLL_TO_CLOSE
+ )
+ } else if (isDirectionLeft(direction)) {
+ return (
+ this.NEW_POSITION >= initialPosition &&
+ touchStart - this.MOVING_POSITION > this.SCROLL_TO_CLOSE
+ )
+ } else if (isDirectionTop(direction)) {
+ return (
+ this.NEW_POSITION >= initialPosition &&
+ touchStart - this.MOVING_POSITION > this.SCROLL_TO_CLOSE
+ )
+ } else {
+ return (
+ this.NEW_POSITION >= initialPosition &&
+ this.MOVING_POSITION - touchStart > this.SCROLL_TO_CLOSE
+ )
+ }
+ }
+
+ getDrawerTransform = (value) => {
+ const { direction } = this.props
+
+ if (isDirectionBottom(direction)) {
+ return { transform: `translate3d(0, ${value}px, 0)` }
+ } else if (isDirectionTop(direction)) {
+ return { transform: `translate3d(0, -${value}px, 0)` }
+ } else if (isDirectionLeft(direction)) {
+ return { transform: `translate3d(-${Math.abs(value)}px, 0, 0)` }
+ } else if (isDirectionRight(direction)) {
+ return { transform: `translate3d(${value}px, 0, 0)` }
+ }
+ }
+
+ getElementSize = () => {
+ return isDirectionBottom(this.props.direction) || isDirectionTop(this.props.direction) ? window.innerHeight : window.innerWidth
+ }
+
+ getPosition(hiddenPosition) {
+ const { position } = this.state
+ const { direction } = this.props
+
+ if (isDirectionRight(direction)) {
+ return hiddenPosition - position
+ } else {
+ return position
+ }
+ }
+
+ inViewportChange = (inView) => {
+ this.props.inViewportChange(inView)
+
+ this.ALLOW_DRAWER_TRANSFORM = inView
+ }
+
+ preventDefault = (event) => event.preventDefault()
+ stopPropagation = (event) => event.stopPropagation()
+
+ render() {
+ const {
+ containerElementClass,
+ containerOpacity,
+ dontApplyListeners,
+ id,
+ getContainerRef,
+ getModalRef,
+ direction
+ } = this.props
+
+ const open = this.state.open && this.props.open
+
+ // If drawer isn't open or in the process of opening/closing, then remove it from the DOM
+ // also, if we're not client side we need to return early because createPortal is only
+ // a clientside method
+
+ // if ((!this.state.open && !this.props.open)) {
+ // return null
+ // }
+
+ const { touching } = this.state
+
+ const springPreset = isDirectionLeft(direction) ? { damping: 17, stiffness: 120 } : { damping: 20, stiffness: 300 }
+ const animationSpring = touching ? springPreset : presets.stiff
+ const hiddenPosition = this.getElementSize()
+ const position = this.getPosition(hiddenPosition)
+
+ // Style object for the container element
+ let containerStyle = {
+ backgroundColor: `rgba(55, 56, 56, ${open ? containerOpacity : 0})`
+ }
+
+ // If direction is right, we set the overflowX property to 'hidden' to hide the x scrollbar during
+ // the sliding animation
+ if (isDirectionRight(direction)) {
+ containerStyle = {
+ ...containerStyle,
+ overflowX: "hidden"
+ }
+ }
+
+ return createPortal(
+
+
+ {crash.error}
+
+
+ )
+ }}
+
+ {this.props.children}
+
+
+
)
+
+ return Upload
+
+
+ {this.state.fileList.length >= 8 ? null : uploadButton}
+
+
+ 
+
+
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/ImageViewer/index.jsx b/packages/app/src/components/ImageViewer/index.jsx
new file mode 100644
index 00000000..0c9bb35c
--- /dev/null
+++ b/packages/app/src/components/ImageViewer/index.jsx
@@ -0,0 +1,54 @@
+import React from "react"
+import { Swiper } from "antd-mobile"
+import { LazyLoadImage } from "react-lazy-load-image-component"
+import classnames from "classnames"
+
+import "react-lazy-load-image-component/src/effects/blur.css"
+import "./index.less"
+
+const ImageViewer = (props) => {
+ React.useEffect(() => {
+ if (!Array.isArray(props.src)) {
+ props.src = [props.src]
+ }
+ }, [])
+
+ const openViewer = () => {
+ if (props.extended) {
+ return false
+ }
+
+ window.app.DrawerController.open("ImageViewer", ImageViewer, {
+ componentProps: {
+ src: props.src,
+ extended: true
+ }
+ })
+ }
+
+ return
+
+ {props.src.map((image) => {
+ return {
+ openViewer(image)
+ }}
+ >
+ {
+ openViewer()
+ }}
+ onError={(e) => {
+ e.target.src = "/broken-image.svg"
+ }}
+ />
+
+ })}
+
+
+}
+
+export default ImageViewer
\ No newline at end of file
diff --git a/packages/app/src/components/ImageViewer/index.less b/packages/app/src/components/ImageViewer/index.less
new file mode 100644
index 00000000..cafc1f60
--- /dev/null
+++ b/packages/app/src/components/ImageViewer/index.less
@@ -0,0 +1,31 @@
+.ImageViewer {
+ --ignore-dragger: true;
+ width: 100%;
+
+ .image-wrapper {
+ width: 100%;
+
+ img {
+ border-radius: 8px;
+ --ignore-dragger: true;
+ width: 100%;
+ max-height: 25vh;
+ object-fit: cover;
+ border-radius: 5px;
+ }
+ }
+
+ &.extended {
+ height: 100%;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ img {
+ max-height: 100vh;
+ height: 100%;
+ object-fit: fill;
+ }
+ }
+}
diff --git a/packages/app/src/components/Navigation/index.jsx b/packages/app/src/components/Navigation/index.jsx
new file mode 100644
index 00000000..5ef45b63
--- /dev/null
+++ b/packages/app/src/components/Navigation/index.jsx
@@ -0,0 +1,76 @@
+import React from "react"
+import { Translation } from "react-i18next"
+
+import Items from "schemas/routes.json"
+import { Icons, createIconRender } from "components/Icons"
+
+import "./index.less"
+
+export default class NavigationMenu extends React.Component {
+ onClick = (id) => {
+ window.app.setLocation(`/${id}`)
+ this.props.close()
+ }
+
+ generateMenus = (items) => {
+ // group items it has children to a new array and the rest to a general array
+ items = items.reduce((acc, item) => {
+ if (item.children) {
+ acc.push(item)
+ } else {
+ acc[0].children.push(item)
+ }
+
+ return acc
+ }, [{
+ id: "general",
+ title: "General",
+ icon: "Home",
+ children: []
+ }])
+
+ return items.map((group) => {
+ return
+
+ {Icons[group.icon] && createIconRender(group.icon)}
+
+
+ })
+ }
+
+ renderItem = (item, index) => {
+ return
+ {Icons[group.icon] && createIconRender(group.icon)}
+
+ {(t) => t(group.title)}
+
+
+
+ {
+ group.children.map((item) => {
+ return this.renderItem(item)
+ })
+ }
+
+ this.onClick(item.id)}
+ className="item"
+ >
+
+ }
+
+ render() {
+ return
+ {Icons[item.icon] && createIconRender(item.icon)}
+
+
+
+
+
+
+
+ {(t) => t(item.title ?? item.id)}
+
+
+
+ {this.generateMenus(Items)}
+
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/Navigation/index.less b/packages/app/src/components/Navigation/index.less
new file mode 100644
index 00000000..a2cd3498
--- /dev/null
+++ b/packages/app/src/components/Navigation/index.less
@@ -0,0 +1,81 @@
+@buttonSize: 26vw;
+@buttonBorderRadius: 8px;
+
+.navigation {
+ display: inline-flex;
+ flex-direction: column;
+
+ width: 100%;
+ overflow: hidden;
+
+ .group {
+ display: inline-flex;
+ flex-direction: column;
+
+ .items {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ flex-wrap: wrap;
+
+ .item {
+ --ignore-dragger: true;
+
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ justify-content: center;
+
+ padding: 10px;
+ margin: 10px 0;
+
+ width: @buttonSize;
+ min-width: @buttonSize;
+ height: @buttonSize;
+ min-height: @buttonSize;
+
+ border-radius: @buttonBorderRadius;
+
+ background-color: var(--background-color-accent);
+ transition: all 80ms ease-in-out;
+
+ .icon {
+ svg {
+ margin: 0 !important;
+ font-size: 2rem;
+ }
+ }
+
+ .name {
+ width: 100%;
+
+ word-break: break-all;
+ text-overflow: ellipsis;
+ text-align: center;
+
+ color: var(--background-color-contrast);
+ padding-top: 10px;
+
+ h1 {
+ word-break: break-all;
+ width: 100%;
+
+ font-size: 1.1rem;
+ margin: 0!important;
+ }
+ }
+ }
+
+ .item:active {
+ background-color: var(--background-color-primary);
+ color: var(--background-color-contrast);
+ transform: scale(0.9);
+ }
+ }
+
+ > div {
+ margin-bottom: 20px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/index.jsx b/packages/app/src/components/PostCard/index.jsx
new file mode 100644
index 00000000..8cfa9d78
--- /dev/null
+++ b/packages/app/src/components/PostCard/index.jsx
@@ -0,0 +1,24 @@
+import React from "react"
+import * as antd from "antd"
+
+import "./index.less"
+
+export default class PostCard extends React.Component {
+ render() {
+ return
+
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/PostCard/index.less b/packages/app/src/components/PostCard/index.less
new file mode 100644
index 00000000..613d77af
--- /dev/null
+++ b/packages/app/src/components/PostCard/index.less
@@ -0,0 +1,45 @@
+.postCard {
+ display: inline-flex;
+ flex-direction: column;
+
+ width: 100%;
+ max-width: 40vw;
+ padding: 17px;
+
+ background-color: var(--background-color-accent);
+ border-radius: 8px;
+
+ .userInfo {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+
+ margin-bottom: 15px;
+
+ h1 {
+ margin: 0;
+ font-family: "DM Mono", monospace;
+ }
+
+ > div {
+ margin-right: 10px;
+ }
+
+ }
+
+ .content {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ background-color: var(--background-color-primary);
+ padding: 10px;
+ border-radius: 8px;
+
+ font-size: 14px;
+ font-family: "Poppins", sans-serif;
+
+ overflow: hidden;
+ word-break: break-all;
+ }
+}
\ No newline at end of file
diff --git a/packages/app/src/components/RenderError/index.jsx b/packages/app/src/components/RenderError/index.jsx
index 825d8aef..767e0753 100644
--- a/packages/app/src/components/RenderError/index.jsx
+++ b/packages/app/src/components/RenderError/index.jsx
@@ -44,7 +44,7 @@ export default (props) => {
+
+
+
+
+
+ + @{this.props.data.user.username} +
+
+ {this.props.data.message}
+
+ openSearchBox(true)}
+ className="searchButton">
+ openSearchBox(true)}
+ onBlur={() => openSearchBox(false)}
+ />
+
+}
\ No newline at end of file
diff --git a/packages/app/src/components/SearchButton/index.less b/packages/app/src/components/SearchButton/index.less
new file mode 100644
index 00000000..6604101f
--- /dev/null
+++ b/packages/app/src/components/SearchButton/index.less
@@ -0,0 +1,18 @@
+.searchButton {
+ .searchBox {
+ .adm-search-bar-input {
+ transition: all 150ms ease-in-out;
+ width: 0px;
+ }
+
+ &.open {
+ .adm-search-bar-input {
+ width: 20vw;
+ }
+ }
+ }
+
+ svg {
+ margin: 0;
+ }
+}
diff --git a/packages/app/src/components/SelectableList/index.jsx b/packages/app/src/components/SelectableList/index.jsx
index d2ecc24c..ecc118b5 100644
--- a/packages/app/src/components/SelectableList/index.jsx
+++ b/packages/app/src/components/SelectableList/index.jsx
@@ -1,13 +1,113 @@
import React from "react"
-import { Icons } from "components/Icons"
-import { List, Button } from "antd"
+import * as antd from "antd"
+import { Button } from "antd"
import classnames from "classnames"
+import _ from "lodash"
+import { Translation } from "react-i18next"
+
+import { Icons, createIconRender } from "components/Icons"
+import { ActionsBar, } from "components"
+import { useLongPress, Haptics } from "utils"
import "./index.less"
+const ListItem = React.memo((props) => {
+ let { item } = props
+
+ if (!item.key) {
+ item.key = item._id ?? item.id
+ }
+
+ const doubleClickSpeed = 400
+ let delayedClick = null
+ let clickedOnce = null
+
+ const handleOnceClick = () => {
+ clickedOnce = null
+
+ if (typeof props.onClickItem === "function") {
+ return props.onClickItem(item.key)
+ }
+ }
+
+ const handleDoubleClick = () => {
+ if (typeof props.onDoubleClickItem === "function") {
+ return props.onDoubleClickItem(item.key)
+ }
+ }
+
+ const handleLongPress = () => {
+ if (typeof props.onLongPressItem === "function") {
+ return props.onLongPressItem(item.key)
+ }
+ }
+
+ const renderChildren = props.renderChildren(item)
+ const isDisabled = renderChildren.props.disabled
+
+ return React.createElement("div", {
+ id: item.key,
+ key: item.key,
+ disabled: isDisabled,
+ className: classnames("selectableList_item", {
+ ["selected"]: props.selected,
+ ["disabled"]: isDisabled,
+ }),
+ onDoubleClick: () => {
+ if (isDisabled) {
+ return false
+ }
+
+ handleDoubleClick()
+ },
+ ...useLongPress(
+ // onLongPress
+ () => {
+ if (isDisabled) {
+ return false
+ }
+
+ if (props.onlyClickSelection) {
+ return false
+ }
+
+ handleLongPress()
+ },
+ // onClick
+ () => {
+ if (isDisabled) {
+ return false
+ }
+
+ if (props.onlyClickSelection) {
+ return handleOnceClick()
+ }
+
+ if (!delayedClick) {
+ delayedClick = _.debounce(handleOnceClick, doubleClickSpeed)
+ }
+
+ if (clickedOnce) {
+ delayedClick.cancel()
+ clickedOnce = false
+ handleDoubleClick()
+ } else {
+ clickedOnce = true
+ delayedClick()
+ }
+ },
+ {
+ shouldPreventDefault: true,
+ delay: props.longPressDelay ?? 300,
+ }
+ ),
+ }, renderChildren)
+})
+
export default class SelectableList extends React.Component {
state = {
selectedKeys: [],
+ selectionEnabled: false,
}
componentDidMount() {
@@ -18,16 +118,52 @@ export default class SelectableList extends React.Component {
}
}
+ componentDidUpdate(prevProps, prevState) {
+ if (prevState.selectionEnabled !== this.state.selectionEnabled) {
+ if (this.state.selectionEnabled) {
+ this.handleFeedbackEvent("selectionStart")
+ } else {
+ this.handleFeedbackEvent("selectionEnd")
+ }
+ }
+ }
+
+ handleFeedbackEvent = (event) => {
+ if (typeof Haptics[event] === "function") {
+ return Haptics[event]()
+ }
+ }
+
+ isKeySelected = (key) => {
+ return this.state.selectedKeys.includes(key)
+ }
+
+ isAllSelected = () => {
+ return this.state.selectedKeys.length === this.props.items.length
+ }
+
selectAll = () => {
if (this.props.items.length > 0) {
+ let updatedSelectedKeys = [...this.props.items.map((item) => item.key ?? item.id ?? item._id)]
+
+ if (typeof this.props.disabledKeys !== "undefined") {
+ updatedSelectedKeys = updatedSelectedKeys.filter((key) => {
+ return !this.props.disabledKeys.includes(key)
+ })
+ }
+
+ this.handleFeedbackEvent("selectionChanged")
+
this.setState({
- selectedKeys: [...this.props.items.map((item) => item.key ?? item.id ?? item._id)],
+ selectionEnabled: true,
+ selectedKeys: updatedSelectedKeys,
})
}
}
unselectAll = () => {
this.setState({
+ selectionEnabled: false,
selectedKeys: [],
})
}
@@ -35,12 +171,18 @@ export default class SelectableList extends React.Component {
selectKey = (key) => {
let list = this.state.selectedKeys ?? []
list.push(key)
+
+ this.handleFeedbackEvent("selectionChanged")
+
return this.setState({ selectedKeys: list })
}
unselectKey = (key) => {
let list = this.state.selectedKeys ?? []
list = list.filter((_key) => key !== _key)
+
+ this.handleFeedbackEvent("selectionChanged")
+
return this.setState({ selectedKeys: list })
}
@@ -48,7 +190,6 @@ export default class SelectableList extends React.Component {
if (typeof this.props.onDone === "function") {
this.props.onDone(this.state.selectedKeys)
}
-
this.unselectAll()
}
@@ -56,17 +197,37 @@ export default class SelectableList extends React.Component {
if (typeof this.props.onDiscard === "function") {
this.props.onDiscard(this.state.selectedKeys)
}
-
this.unselectAll()
}
- componentDidUpdate(prevProps, prevState) {
- if (typeof this.props.selectionEnabled !== "undefined") {
- if (!Boolean(this.props.selectionEnabled) && this.state.selectedKeys.length > 0) {
- this.setState({
- selectedKeys: [],
- })
+ onDoubleClickItem = (key) => {
+ if (typeof this.props.onDoubleClick === "function") {
+ this.props.onDoubleClick(key)
+ }
+ }
+
+ onClickItem = (key) => {
+ if (this.props.overrideSelectionEnabled || this.state.selectionEnabled) {
+ if (this.isKeySelected(key)) {
+ this.unselectKey(key)
+ } else {
+ this.selectKey(key)
}
+ } else {
+ if (typeof this.props.onClickItem === "function") {
+ this.props.onClickItem(key)
+ }
+ }
+ }
+
+ onLongPressItem = (key) => {
+ if (this.props.overrideSelectionEnabled) {
+ return false
+ }
+
+ if (!this.state.selectionEnabled) {
+ this.selectKey(key)
+ this.setState({ selectionEnabled: true })
}
}
@@ -75,31 +236,34 @@ export default class SelectableList extends React.Component {
return (