simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Limit number of shortcuts

Browse source 
9 because there's only 9 keyboard shortcuts. There's '0' but… nah.
This commit is contained in:
Lim Chee Aun 2023-02-18 19:39:17 +08:00
parent 3f73f7d174
commit 45a1fc057e
1 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/shortcuts-settings.jsx
View file

@ -9,6 +9,8 @@ import states from '../utils/states';
import AsyncText from './AsyncText'; import AsyncText from './AsyncText';
import Icon from './icon'; import Icon from './icon';
const SHORTCUTS_LIMIT = 9;
const TYPES = [ const TYPES = [
'following', 'following',
'notifications', 'notifications',
@ -134,6 +136,7 @@ export const SHORTCUTS_META = {
function ShortcutsSettings() { function ShortcutsSettings() {
const snapStates = useSnapshot(states); const snapStates = useSnapshot(states);
const { masto } = api(); const { masto } = api();
const { shortcuts } = snapStates;
const [lists, setLists] = useState([]); const [lists, setLists] = useState([]);
const [followedHashtags, setFollowedHashtags] = useState([]); const [followedHashtags, setFollowedHashtags] = useState([]);
@ -187,7 +190,7 @@ function ShortcutsSettings() {
</p> </p>
{snapStates.shortcuts.length > 0 ? ( {snapStates.shortcuts.length > 0 ? (
<ol class="shortcuts-list"> <ol class="shortcuts-list">
{snapStates.shortcuts.map((shortcut, i) => { {shortcuts.map((shortcut, i) => {
const key = i + Object.values(shortcut); const key = i + Object.values(shortcut);
const { type } = shortcut; const { type } = shortcut;
let { icon, title } = SHORTCUTS_META[type]; let { icon, title } = SHORTCUTS_META[type];
@ -223,7 +226,7 @@ function ShortcutsSettings() {
<button <button
type="button" type="button"
class="plain small" class="plain small"
disabled={i === snapStates.shortcuts.length - 1} disabled={i === shortcuts.length - 1}
onClick={() => { onClick={() => {
const shortcutsArr = Array.from(states.shortcuts); const shortcutsArr = Array.from(states.shortcuts);
if (i < states.shortcuts.length - 1) { if (i < states.shortcuts.length - 1) {
@ -257,6 +260,7 @@ function ShortcutsSettings() {
)} )}
<hr /> <hr />
<ShortcutForm <ShortcutForm
disabled={shortcuts.length >= SHORTCUTS_LIMIT}
lists={lists} lists={lists}
followedHashtags={followedHashtags} followedHashtags={followedHashtags}
onSubmit={(data) => { onSubmit={(data) => {
@ -270,7 +274,7 @@ function ShortcutsSettings() {
} }
export default ShortcutsSettings; export default ShortcutsSettings;
function ShortcutForm({ type, lists, followedHashtags, onSubmit }) { function ShortcutForm({ type, lists, followedHashtags, onSubmit, disabled }) {
const [currentType, setCurrentType] = useState(type); const [currentType, setCurrentType] = useState(type);
return ( return (
<> <>
@ -292,12 +296,16 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit }) {
> >
<header> <header>
<h3>Add a shortcut</h3> <h3>Add a shortcut</h3>
<button type="submit">Add</button> <button type="submit" disabled={disabled}>
Add
</button>
</header> </header>
<p> <p>
<label> <label>
<span>Timeline</span> <span>Timeline</span>
<select <select
required
disabled={disabled}
onChange={(e) => { onChange={(e) => {
setCurrentType(e.target.value); setCurrentType(e.target.value);
}} }}
@ -317,7 +325,7 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit }) {
<p> <p>
<label> <label>
<span>List</span> <span>List</span>
<select name="id" required> <select name="id" required disabled={disabled}>
{lists.map((list) => ( {lists.map((list) => (
<option value={list.id}>{list.title}</option> <option value={list.id}>{list.title}</option>
))} ))}
@ -336,6 +344,7 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit }) {
name={name} name={name}
placeholder={placeholder} placeholder={placeholder}
required={type === 'text'} required={type === 'text'}
disabled={disabled}
list={ list={
currentType === 'hashtag' currentType === 'hashtag'
? 'followed-hashtags-datalist' ? 'followed-hashtags-datalist'
@ -354,7 +363,6 @@ function ShortcutForm({ type, lists, followedHashtags, onSubmit }) {
); );
}, },
)} )}
<footer></footer>
</form> </form>
</> </>
); );