qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-10-23 13:32:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

mostly abstracted (emoji) checkbox list

Browse source
This commit is contained in:
f0x 2023-01-11 16:45:50 +00:00
parent 4cbfa77907
commit beb09aa827
7 changed files with 257 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

157
web/source/settings/admin/emoji/remote/parse-from-toot.js
View file

@ -25,9 +25,11 @@ const syncpipe = require("syncpipe");
const {
useTextInput,
useComboBoxInput
useComboBoxInput,
useCheckListInput
} = require("../../../lib/form");
const CheckList = require("../../../components/check-list");
const { CategorySelect } = require('../category-select');
const query = require("../../../lib/query");
@ -87,17 +89,17 @@ module.exports = function ParseFromToot({ emojiCodes }) {
onChange={onURLChange}
value={url}
/>
<button disabled={isLoading}>
<button className="button-inline" disabled={isLoading}>
<i className={[
"fa",
(isLoading
? "fa-refresh fa-spin"
: "fa-search")
].join(" ")} aria-hidden="true" title="Search"/>
].join(" ")} aria-hidden="true" title="Search" />
<span className="sr-only">Search</span>
</button>
</div>
{isLoading && <Loading/>}
{isLoading && <Loading />}
{error && <div className="error">{error.data.error}</div>}
</div>
</form>
@ -106,102 +108,21 @@ module.exports = function ParseFromToot({ emojiCodes }) {
);
};
function makeEmojiState(emojiList, checked) {
/* Return a new object, with a key for every emoji's shortcode,
And a value for it's checkbox `checked` state.
*/
return syncpipe(emojiList, [
(_) => _.map((emoji) => [emoji.shortcode, {
checked,
valid: true
}]),
(_) => Object.fromEntries(_)
]);
}
function updateEmojiState(emojiState, checked) {
/* Create a new object with all emoji entries' checked state updated */
return syncpipe(emojiState, [
(_) => Object.entries(emojiState),
(_) => _.map(([key, val]) => [key, {
...val,
checked
}]),
(_) => Object.fromEntries(_)
]);
}
function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
const [patchRemoteEmojis, patchResult] = query.usePatchRemoteEmojisMutation();
const [err, setError] = React.useState();
const toggleAllRef = React.useRef(null);
const [toggleAllState, setToggleAllState] = React.useState(0);
const [emojiState, setEmojiState] = React.useState(makeEmojiState(emojiList, false));
const [someSelected, setSomeSelected] = React.useState(false);
const emojiCheckList = useCheckListInput("selectedEmoji", {
entries: emojiList,
uniqueKey: "shortcode"
});
const [categoryState, resetCategory, { category }] = useComboBoxInput("category");
React.useEffect(() => {
if (emojiList != undefined) {
setEmojiState(makeEmojiState(emojiList, false));
}
}, [emojiList]);
React.useEffect(() => {
/* Updates (un)check all checkbox, based on shortcode checkboxes
Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
*/
if (toggleAllRef.current == null) {
return;
}
let values = Object.values(emojiState);
/* one or more boxes are checked */
let some = values.some((v) => v.checked);
let all = false;
if (some) {
/* there's not at least one unchecked box */
all = !values.some((v) => v.checked == false);
}
setSomeSelected(some);
if (some && !all) {
setToggleAllState(2);
toggleAllRef.current.indeterminate = true;
} else {
setToggleAllState(all ? 1 : 0);
toggleAllRef.current.indeterminate = false;
}
}, [emojiState, toggleAllRef]);
function updateEmoji(shortcode, value) {
setEmojiState({
...emojiState,
[shortcode]: {
...emojiState[shortcode],
...value
}
});
}
function toggleAll(e) {
let selectAll = e.target.checked;
if (toggleAllState == 2) { // indeterminate
selectAll = false;
}
setEmojiState(updateEmojiState(emojiState, selectAll));
setToggleAllState(selectAll);
}
function submit(action) {
Promise.try(() => {
setError(null);
const selectedShortcodes = syncpipe(emojiState, [
const selectedShortcodes = syncpipe(emojiCheckList.value, [
(_) => Object.entries(_),
(_) => _.filter(([_shortcode, entry]) => entry.checked),
(_) => _.map(([shortcode, entry]) => {
@ -222,7 +143,7 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
category
}).unwrap();
}).then(() => {
setEmojiState(makeEmojiState(emojiList, false));
emojiCheckList.reset();
resetCategory();
}).catch((e) => {
if (Array.isArray(e)) {
@ -240,25 +161,20 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
return (
<div className="parsed">
<span>This {type == "statuses" ? "toot" : "account"} uses the following custom emoji, select the ones you want to copy/disable:</span>
<div className="emoji-list">
<label className="header">
<input
ref={toggleAllRef}
type="checkbox"
onChange={toggleAll}
checked={toggleAllState === 1}
/> All
</label>
{emojiList.map((emoji) => (
<EmojiEntry
key={emoji.shortcode}
emoji={emoji}
localEmojiCodes={localEmojiCodes}
updateEmoji={(value) => updateEmoji(emoji.shortcode, value)}
checked={emojiState[emoji.shortcode].checked}
/>
))}
</div>
<CheckList
field={emojiCheckList}
Component={EmojiEntry}
localEmojiCodes={localEmojiCodes}
/>
{/* {emojiList.map((emoji) => (
<EmojiEntry
key={emoji.shortcode}
emoji={emoji}
localEmojiCodes={localEmojiCodes}
updateEmoji={(value) => updateEmoji(emoji.shortcode, value)}
checked={emojiState[emoji.shortcode].checked}
/>
))} */}
<CategorySelect
value={category}
@ -266,8 +182,8 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
/>
<div className="action-buttons row">
<button disabled={!someSelected} onClick={() => submit("copy")}>{patchResult.isLoading ? "Processing..." : "Copy to local emoji"}</button>
<button disabled={!someSelected} onClick={() => submit("disable")} className="danger">{patchResult.isLoading ? "Processing..." : "Disable"}</button>
<button disabled={!emojiCheckList.someSelected} onClick={() => submit("copy")}>{patchResult.isLoading ? "Processing..." : "Copy to local emoji"}</button>
<button disabled={!emojiCheckList.someSelected} onClick={() => submit("disable")} className="danger">{patchResult.isLoading ? "Processing..." : "Disable"}</button>
</div>
{err && <div className="error">
{err}
@ -279,28 +195,23 @@ function CopyEmojiForm({ localEmojiCodes, type, domain, emojiList }) {
);
}
function EmojiEntry({ emoji, localEmojiCodes, updateEmoji, checked }) {
function EmojiEntry({ entry: emoji, localEmojiCodes, onChange }) {
const [onShortcodeChange, _resetShortcode, { shortcode, shortcodeRef, shortcodeValid }] = useTextInput("shortcode", {
defaultValue: emoji.shortcode,
validator: function validateShortcode(code) {
return (checked && localEmojiCodes.has(code))
return (emoji.checked && localEmojiCodes.has(code))
? "Shortcode already in use"
: "";
}
});
React.useEffect(() => {
updateEmoji({ valid: shortcodeValid });
onChange({ valid: shortcodeValid });
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [shortcodeValid]);
return (
<label key={emoji.shortcode} className="row">
<input
type="checkbox"
onChange={(e) => updateEmoji({ checked: e.target.checked })}
checked={checked}
/>
<>
<img className="emoji" src={emoji.url} title={emoji.shortcode} />
<input
@ -310,10 +221,10 @@ function EmojiEntry({ emoji, localEmojiCodes, updateEmoji, checked }) {
ref={shortcodeRef}
onChange={(e) => {
onShortcodeChange(e);
updateEmoji({ shortcode: e.target.value, checked: true });
onChange({ shortcode: e.target.value, checked: true });
}}
value={shortcode}
/>
</label>
</>
);
}

58
web/source/settings/components/check-list.jsx Normal file
View file

@ -0,0 +1,58 @@
/*
GoToSocial
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
"use strict";
const React = require("react");
module.exports = function CheckList({ field, Component, ...componentProps }) {
return (
<div className="checkbox-list">
<label className="header">
<input
ref={field.toggleAll.ref}
type="checkbox"
onChange={field.toggleAll.onChange}
checked={field.toggleAll.value === 1}
/> All
</label>
{Object.values(field.value).map((entry) => (
<CheckListEntry
key={entry.key}
onChange={(value) => field.onChange(entry.key, value)}
entry={entry}
Component={Component}
componentProps={componentProps}
/>
))}
</div>
);
};
function CheckListEntry({ entry, onChange, Component, componentProps }) {
return (
<label className="row">
<input
type="checkbox"
onChange={(e) => onChange({ checked: e.target.value })}
checked={entry.checked}
/>
<Component entry={entry} onChange={onChange} {...componentProps} />
</label>
);
}

28
web/source/settings/components/form/inputs.jsx
View file

@ -20,8 +20,8 @@
const React = require("react");
function TextInput({label, field, ...inputProps}) {
const {onChange, value, ref} = field;
function TextInput({ label, field, ...inputProps }) {
const { onChange, value, ref } = field;
return (
<div className="form-field text">
@ -29,7 +29,7 @@ function TextInput({label, field, ...inputProps}) {
{label}
<input
type="text"
{...{onChange, value, ref}}
{...{ onChange, value, ref }}
{...inputProps}
/>
</label>
@ -37,8 +37,8 @@ function TextInput({label, field, ...inputProps}) {
);
}
function TextArea({label, field, ...inputProps}) {
const {onChange, value, ref} = field;
function TextArea({ label, field, ...inputProps }) {
const { onChange, value, ref } = field;
return (
<div className="form-field textarea">
@ -46,7 +46,7 @@ function TextArea({label, field, ...inputProps}) {
{label}
<textarea
type="text"
{...{onChange, value, ref}}
{...{ onChange, value, ref }}
{...inputProps}
/>
</label>
@ -54,8 +54,8 @@ function TextArea({label, field, ...inputProps}) {
);
}
function FileInput({label, field, ...inputProps}) {
const {onChange, ref, infoComponent} = field;
function FileInput({ label, field, ...inputProps }) {
const { onChange, ref, infoComponent } = field;
return (
<div className="form-field file">
@ -67,7 +67,7 @@ function FileInput({label, field, ...inputProps}) {
<input
type="file"
className="hidden"
{...{onChange, ref}}
{...{ onChange, ref }}
{...inputProps}
/>
</label>
@ -75,8 +75,8 @@ function FileInput({label, field, ...inputProps}) {
);
}
function Checkbox({label, field, ...inputProps}) {
const {onChange, value} = field;
function Checkbox({ label, field, ...inputProps }) {
const { onChange, value } = field;
return (
<div className="form-field checkbox">
@ -92,15 +92,15 @@ function Checkbox({label, field, ...inputProps}) {
);
}
function Select({label, field, options, ...inputProps}) {
const {onChange, value, ref} = field;
function Select({ label, field, options, ...inputProps }) {
const { onChange, value, ref } = field;
return (
<div className="form-field select">
<label>
{label}
<select
{...{onChange, value, ref}}
{...{ onChange, value, ref }}
{...inputProps}
>
{options}

139
web/source/settings/lib/form/check-list.jsx Normal file
View file

@ -0,0 +1,139 @@
/*
GoToSocial
Copyright (C) 2021-2022 GoToSocial Authors admin@gotosocial.org
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
"use strict";
const React = require("react");
const syncpipe = require("syncpipe");
function createState(entries, uniqueKey, oldState, defaultValue) {
return syncpipe(entries, [
(_) => _.map((entry) => {
let key = entry[uniqueKey];
return [
key,
{
...entry,
key,
checked: oldState[key]?.checked ?? entry.checked ?? defaultValue
}
];
}),
(_) => Object.fromEntries(_)
]);
}
function updateAllState(state, newValue) {
return syncpipe(state, [
(_) => Object.values(_),
(_) => _.map((entry) => [entry.key, {
...entry,
checked: newValue
}]),
(_) => Object.fromEntries(_)
]);
}
function updateState(state, key, newValue) {
return {
...state,
[key]: {
...state[key],
...newValue
}
};
}
module.exports = function useCheckListInput({ name, Name }, { entries, uniqueKey = "key", defaultValue = false }) {
const [state, setState] = React.useState({});
const [someSelected, setSomeSelected] = React.useState(false);
const [toggleAllState, setToggleAllState] = React.useState(0);
const toggleAllRef = React.useRef(null);
React.useEffect(() => {
/*
entries changed, update state,
re-using old state if available for key
*/
setState(createState(entries, uniqueKey, state, defaultValue));
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [entries]);
React.useEffect(() => {
/* Updates (un)check all checkbox, based on shortcode checkboxes
Can be 0 (not checked), 1 (checked) or 2 (indeterminate)
*/
if (toggleAllRef.current == null) {
return;
}
let values = Object.values(state);
/* one or more boxes are checked */
let some = values.some((v) => v.checked);
let all = false;
if (some) {
/* there's not at least one unchecked box */
all = !values.some((v) => v.checked == false);
}
setSomeSelected(some);
if (some && !all) {
setToggleAllState(2);
toggleAllRef.current.indeterminate = true;
} else {
setToggleAllState(all ? 1 : 0);
toggleAllRef.current.indeterminate = false;
}
}, [state, toggleAllRef]);
function toggleAll(e) {
let selectAll = e.target.checked;
if (toggleAllState == 2) { // indeterminate
selectAll = false;
}
setState(updateAllState(state, selectAll));
setToggleAllState(selectAll);
}
function reset() {
setState(updateAllState(state, defaultValue));
}
return Object.assign([
state,
reset,
{ name }
], {
name,
value: state,
onChange: (key, newValue) => setState(updateState(state, key, newValue)),
reset,
someSelected,
toggleAll: {
ref: toggleAllRef,
value: toggleAllState,
onChange: toggleAll
}
});
};

4
web/source/settings/lib/form/combobox.jsx
View file

@ -20,7 +20,7 @@
const { useComboboxState } = require("ariakit/combobox");
module.exports = function useComboBoxInput({name, Name}, {defaultValue} = {}) {
module.exports = function useComboBoxInput({ name, Name }, { defaultValue } = {}) {
const state = useComboboxState({
defaultValue,
gutter: 0,
@ -34,9 +34,9 @@ module.exports = function useComboBoxInput({name, Name}, {defaultValue} = {}) {
return Object.assign([
state,
reset,
name,
{
[name]: state.value,
name
}
], {
name,

8
web/source/settings/lib/form/index.js
View file

@ -19,20 +19,20 @@
"use strict";
function capitalizeFirst(str) {
return str.slice(0,1).toUpperCase()+str.slice(1);
return str.slice(0, 1).toUpperCase() + str.slice(1);
}
function makeHook(func) {
return (name, ...args) => func({
name,
Name: capitalizeFirst(name)
},
...args);
}, ...args);
}
module.exports = {
useTextInput: makeHook(require("./text")),
useFileInput: makeHook(require("./file")),
useBoolInput: makeHook(require("./bool")),
useComboBoxInput: makeHook(require("./combobox"))
useComboBoxInput: makeHook(require("./combobox")),
useCheckListInput: makeHook(require("./check-list"))
};

8
web/source/settings/style.css
View file

@ -223,6 +223,10 @@ section.with-sidebar > div, section.with-sidebar > form {
line-height: 1.5rem;
}
.button-inline {
width: auto;
}
input[type=checkbox] {
justify-self: start;
width: initial;
@ -403,7 +407,7 @@ span.form-info {
justify-content: space-between;
}
.emoji-list {
.checkbox-list {
background: $settings-entry-bg;
.entry {
@ -616,7 +620,7 @@ span.form-info {
gap: 1rem;
}
.emoji-list {
.checkbox-list {
display: flex;
flex-direction: column;