diff --git a/src/settings/AdminGroupSelect.tsx b/src/settings/AdminGroupSelect.tsx index 6a8292fa4..d68cae4bf 100644 --- a/src/settings/AdminGroupSelect.tsx +++ b/src/settings/AdminGroupSelect.tsx @@ -21,14 +21,13 @@ * */ -import * as React from 'react'; -import Select from 'react-select'; +import * as React from 'react' +import Select from 'react-select' import { CLASS_NAME_ADMIN_DELEGATION } from '../Constants.js' -import { Component } from 'react'; -import { getCurrentUser } from '@nextcloud/auth'; -import { Group, Api, Circle } from './Api'; -import { loadState } from '@nextcloud/initial-state'; +import { Component } from 'react' +import { getCurrentUser } from '@nextcloud/auth' +import { Group, Api } from './Api' interface AdminGroupSelectProps { groups: Group[], @@ -44,7 +43,7 @@ class AdminGroupSelect extends Component { delegatedAdminGroups: [], } - constructor (props) { + constructor(props) { super(props) this.state.groups = props.groups this.state.allGroups = props.allGroups @@ -55,32 +54,33 @@ class AdminGroupSelect extends Component { componentDidMount() { this.api.listGroups().then((groups) => { - this.setState({groups}); - }); + this.setState({ groups }) + }) this.api.listDelegatedGroups(CLASS_NAME_ADMIN_DELEGATION).then((groups) => { - this.setState({delegatedAdminGroups: groups}); - }); + this.setState({ delegatedAdminGroups: groups }) + }) } updateDelegatedAdminGroups(options: {value: string, label: string}[]): void { if (this.state.groups !== undefined) { const groups = options.map(option => { - return this.state.groups.filter(g => g.gid === option.value)[0]; - }); - this.setState({delegatedAdminGroups: groups}, () => { - this.api.updateDelegatedGroups(this.state.delegatedAdminGroups, CLASS_NAME_ADMIN_DELEGATION); - }); + return this.state.groups.filter(g => g.gid === option.value)[0] + }) + this.setState({ delegatedAdminGroups: groups }, () => { + this.api.updateDelegatedGroups(this.state.delegatedAdminGroups, CLASS_NAME_ADMIN_DELEGATION) + }) } } - render () { + render() { const options = this.state.groups.map(group => { return { value: group.gid, - label: group.displayName - }; - }); + label: group.displayName, + } + }) + /* @ts-expect-error Typescript error due to async react component */ return this.setAcl(folder, event.target.checked)} + title={ + App.supportACL() + ? t('groupfolders', 'Advanced permissions allows setting permissions on a per-file basis but comes with a performance overhead') + : t('groupfolders', 'Advanced permissions are only supported with Nextcloud 16 and up') + } + onChange={(event) => this.setAcl(folder, event.target.checked)} /> - {folder.acl && - implements OC.Plugin - }); + }) return
{ - this.setState({editingGroup: 0, editingMountPoint: 0}) - }}> + onClick={() => { + this.setState({ editingGroup: 0, editingMountPoint: 0 }) + }}> {this.showAdminDelegationForms()} - - - - - - + + + {/* @ts-expect-error Typescript error due to async react component */} {rows} @@ -350,7 +357,7 @@ export class App extends Component<{}, AppState> implements OC.Plugin { - this.setState({newMountPoint: event.target.value}) + this.setState({ newMountPoint: event.target.value }) }}/> @@ -360,20 +367,25 @@ export class App extends Component<{}, AppState> implements OC.Plugin
this.onSortClick('mount_point')}> - {t('groupfolders', 'Folder name')} - + this.onSortClick('mount_point')}> + {t('groupfolders', 'Folder name')} + - this.onSortClick('groups')}> - {groupHeader} - + this.onSortClick('groups')}> + {groupHeader} + - this.onSortClick('quota')}> - {t('groupfolders', 'Quota')} - + this.onSortClick('quota')}> + {t('groupfolders', 'Quota')} + - this.onSortClick('acl')}> - {t('groupfolders', 'Advanced Permissions')} - + this.onSortClick('acl')}> + {t('groupfolders', 'Advanced Permissions')} + - -
+
-
; + } -} +} interface ManageAclSelectProps { folder: Folder; onChange: (type: string, id: string, manageAcl: boolean) => void; - onSearch: (name: string) => Thenable<{ groups: OCSGroup[]; users: OCSUser[]; }>; -}; - - + onSearch: (name: string) => Thenable<{ groups: OCSGroup[]; users: OCSUser[]; }>; +} -function ManageAclSelect({onChange, onSearch, folder}: ManageAclSelectProps) { +/** + * + * @param root0 + * @param root0.onChange + * @param root0.onSearch + * @param root0.folder + */ +function ManageAclSelect({ onChange, onSearch, folder }: ManageAclSelectProps) { const handleSearch = (inputValue: string) => { return new Promise(resolve => { onSearch(inputValue).then((result) => { @@ -385,6 +397,8 @@ function ManageAclSelect({onChange, onSearch, folder}: ManageAclSelectProps) { const typeLabel = (item) => { return item.type === 'user' ? t('groupfolders', 'User') : t('groupfolders', 'Group') } + + /* @ts-expect-error Typescript error due to async react component */ return ({ ...base, - backgroundColor: state.isFocused ? 'var(--color-background-dark)' : 'transparent' + backgroundColor: state.isFocused ? 'var(--color-background-dark)' : 'transparent', }), dropdownIndicator: base => ({ ...base, - padding: 4 + padding: 4, }), clearIndicator: base => ({ ...base, - padding: 4 + padding: 4, }), multiValue: base => ({ ...base, backgroundColor: 'var(--color-background-dark)', - color: 'var(--color-main-text)' + color: 'var(--color-main-text)', }), multiValueLabel: base => ({ ...base, - color: 'var(--color-main-text)' + color: 'var(--color-main-text)', }), valueContainer: base => ({ ...base, - padding: '0px 6px' + padding: '0px 6px', }), input: base => ({ ...base, margin: 0, - padding: 0 + padding: 0, }), menu: (provided) => ({ ...provided, backgroundColor: 'var(--color-main-background)', borderColor: 'var(--color-border)', - }) + }), }} /> } diff --git a/src/settings/FolderGroups.tsx b/src/settings/FolderGroups.tsx index 77b082e30..b2da8e6fd 100644 --- a/src/settings/FolderGroups.tsx +++ b/src/settings/FolderGroups.tsx @@ -140,6 +140,7 @@ function AdminGroupSelect({allGroups, allCircles, onChange}: CircleGroupSelectPr ? t('groupfolders', 'Add group or circle') : t('groupfolders', 'Add group') + /* @ts-expect-error Typescript error due to async react component */ return { value={this.state.delegatedSubAdminGroups.map(group => { return { value: group.gid, - label: group.displayName - }; + label: group.displayName, + } })} className="delegated-admins-select" options={options} @@ -94,20 +95,21 @@ class SubAdminGroupSelect extends Component { styles={{ input: (provided) => ({ ...provided, - height: '30' + height: '30', }), control: (provided) => ({ ...provided, - backgroundColor: 'var(--color-main-background)' + backgroundColor: 'var(--color-main-background)', }), menu: (provided) => ({ ...provided, backgroundColor: 'var(--color-main-background)', - borderColor: 'var(--color-border, #888)' - }) + borderColor: 'var(--color-border, #888)', + }), }} /> } + } -export default SubAdminGroupSelect \ No newline at end of file +export default SubAdminGroupSelect diff --git a/src/settings/SubmitInput.tsx b/src/settings/SubmitInput.tsx index 285d626e5..fc7271bb8 100644 --- a/src/settings/SubmitInput.tsx +++ b/src/settings/SubmitInput.tsx @@ -1,8 +1,8 @@ -import * as React from 'react'; +import * as React from 'react' import { Component, InputHTMLAttributes, - SyntheticEvent -} from 'react'; + SyntheticEvent, +} from 'react' export interface SubmitInputProps extends InputHTMLAttributes { initialValue?: string; @@ -14,27 +14,29 @@ export interface SubmitInputState { } export class SubmitInput extends Component { + state: SubmitInputState = { - value: '' - }; + value: '', + } constructor(props: SubmitInputProps) { - super(props); - this.state.value = props.initialValue || ''; + super(props) + this.state.value = props.initialValue || '' } onSubmit = (event: SyntheticEvent) => { - event.preventDefault(); - this.props.onSubmitValue(this.state.value); - }; + event.preventDefault() + this.props.onSubmitValue(this.state.value) + } render() { - const {initialValue, onSubmitValue, ...props} = this.props; + const { initialValue, onSubmitValue, ...props } = this.props return
this.setState({value: event.currentTarget.value})}/> -
; + onChange={event => this.setState({ value: event.currentTarget.value })}/> + } + } diff --git a/src/settings/index.tsx b/src/settings/index.tsx index 6d028624c..9d9e9397a 100644 --- a/src/settings/index.tsx +++ b/src/settings/index.tsx @@ -1,29 +1,31 @@ -'use strict'; +'use strict' -import {App} from './App'; -import {AppContainer} from 'react-hot-loader'; -import React from 'react'; -import ReactDom from 'react-dom'; +import { App } from './App' +import { AppContainer } from 'react-hot-loader' +import * as React from 'react' +import * as ReactDom from 'react-dom' // Enable React devtools -window['React'] = React; +window.React = React const render = (Component) => { ReactDom.render( + /* @ts-expect-error Typescript error due to async react component */ + {/* @ts-expect-error Typescript error due to async react component */} , - document.getElementById('groupfolders-root') - ); -}; + document.getElementById('groupfolders-root'), + ) +} $(document).ready(() => { - render(App); + render(App) -// Hot Module Replacement API + // Hot Module Replacement API if (module.hot) { module.hot.accept('./App', () => { render(App) - }); + }) } -}); +})