diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx index 6ba60492f4d..aeb745a1d2a 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx +++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_component_showcase.tsx @@ -68,19 +68,6 @@ export class ComponentShowcase implements m.ClassComponent { view() { return (
-

Dropdown

-
- - console.log('Selected option: ', optionLabel) - } - /> -

Spinner

@@ -123,7 +110,7 @@ export class ComponentShowcase implements m.ClassComponent { label: 'Report', iconLeft: 'cautionCircle', isSecondary: true, - onclick: () => console.log('clicked'), + onclick: () => notifySuccess('clicked'), }, ]} /> @@ -394,6 +381,35 @@ export class ComponentShowcase implements m.ClassComponent { label="Text area" placeholder="Type here" /> + + notifySuccess(`Selected option: ${optionLabel}`) + } + /> + { + if (val.match(/[^A-Za-z]/)) { + return ['failure', 'Must enter characters A-Z']; + } else { + return ['success', 'Input validated']; + } + }} + label="This input accepts chars A-Z" + onSelect={(optionLabel) => + notifySuccess(`Selected option: ${optionLabel}`) + } + searchable={true} + /> { notifySuccess(`Image uploaded to ${url.slice(0, 18)}...`); diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx index 94725126407..28dc2bf2090 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx +++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_dropdown.tsx @@ -1,55 +1,129 @@ /* @jsx m */ -import m from 'mithril'; +import m, { VnodeDOM } from 'mithril'; import 'components/component_kit/cw_dropdown.scss'; -import { CWTextInput } from './cw_text_input'; +import { CWTextInput, TextInputAttrs } from './cw_text_input'; import { CWPopoverMenuItem } from './cw_popover/cw_popover_menu'; -import { MenuItem } from './types'; +import { DefaultMenuItem } from './types'; +import { ValidationStatus } from './cw_validation_text'; export type DropdownInputAttrs = { - inputOptions: Array; + customFilter: (item: DefaultMenuItem, query: string) => DefaultMenuItem[]; + defaultActiveIndex?: number; + defaultMenuItems: DefaultMenuItem[]; + inputValidationFn?: (value: string) => [ValidationStatus, string]; + label: string; + placeholder?: string; onSelect?: (optionLabel: string, index?: number) => void; - initialValue?: string; + searchable?: boolean; + textInputAttrs?: TextInputAttrs; }; export class CWDropdown implements m.ClassComponent { private showDropdown: boolean; - private selectedValue: string; + private activeMenuItems: DefaultMenuItem[]; + private value: string; - oninit(vnode) { + filterMenuItems( + items: DefaultMenuItem[], + query: string, + customFilter?: (item: DefaultMenuItem, query: string) => DefaultMenuItem[] + ) { + const defaultFilter = (item: DefaultMenuItem) => { + return item.label.toLowerCase().includes(query.toLowerCase()); + }; + const filterFn = customFilter + ? (item: DefaultMenuItem) => customFilter(item, query) + : defaultFilter; + + return items.filter(filterFn); + } + + oninit(vnode: VnodeDOM) { this.showDropdown = false; - this.selectedValue = - vnode.attrs.initialValue ?? vnode.attrs.inputOptions[0].label; + this.activeMenuItems = vnode.attrs.defaultMenuItems; + + document.body.addEventListener('click', (event) => { + const $dropdown = document.querySelector('.dropdown-wrapper'); + if (!$dropdown) return; + if (!$dropdown.contains(event.target as Node)) { + this.showDropdown = false; + m.redraw(); + } + }); } - view(vnode) { - const { inputOptions, onSelect } = vnode.attrs; + view(vnode: VnodeDOM) { + const { + customFilter, + defaultActiveIndex, + defaultMenuItems, + inputValidationFn, + label, + onSelect, + placeholder, + searchable, + } = vnode.attrs; + + // Input value must be passed as spread to CWTextInput, or it will + // always overwrite the defaultValue prop + + if (!this.activeMenuItems.length) this.showDropdown = false; + const { activeMenuItems, showDropdown, ...thisParams } = this; return (
{ - // Only here because it makes TextInput display correctly + defaultValue={defaultMenuItems[defaultActiveIndex ?? 0].label} + displayOnly={!searchable} + iconRightonclick={(e: MouseEvent) => { + this.showDropdown = !showDropdown; + e.stopPropagation(); + }} + inputValidationFn={(val: string) => { + if (defaultMenuItems.find((i) => i.label === val)) { + return ['success', 'Input validated']; + } else { + return inputValidationFn(val); + } }} onclick={() => { - this.showDropdown = !this.showDropdown; + if (searchable) { + delete this.value; + } + this.showDropdown = !showDropdown; + }} + oninput={(e) => { + this.showDropdown = true; + if (e.target.value?.length > 0) { + const inputText = e.target.value; + this.activeMenuItems = this.filterMenuItems( + defaultMenuItems, + inputText, + customFilter + ); + } else { + this.activeMenuItems = defaultMenuItems; + m.redraw(); + } }} + label={label} + placeholder={placeholder} + {...thisParams} /> - {this.showDropdown && ( + {showDropdown && (
- {inputOptions.map((item, idx) => { + {activeMenuItems.map((item, idx) => { return ( { this.showDropdown = false; - this.selectedValue = item.label; + this.value = item.label; if (onSelect) onSelect(item.label, idx); }} /> diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx index a7a85c164cb..fbfc160b0b3 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx +++ b/packages/commonwealth/client/scripts/views/components/component_kit/cw_text_input.tsx @@ -1,9 +1,10 @@ /* @jsx m */ -import m from 'mithril'; +import m, { VnodeDOM } from 'mithril'; import 'components/component_kit/cw_text_input.scss'; +import _ from 'lodash'; import { ComponentType } from './types'; import { getClasses } from './helpers'; import { CWLabel } from './cw_label'; @@ -14,11 +15,20 @@ import { CWIconButton } from './cw_icon_button'; type TextInputSize = 'small' | 'large'; +export type InputStyleAttrs = { + inputClassName?: string; + darkMode?: boolean; + disabled?: boolean; + size: TextInputSize; + validationStatus?: ValidationStatus; + displayOnly?: boolean; +}; + export type TextInputAttrs = { autocomplete?: string; autofocus?: boolean; containerClassName?: string; - value?: string; + defaultValue; iconRight?: string; iconRightonclick?: () => void; inputValidationFn?: (value: string) => [ValidationStatus, string]; @@ -29,24 +39,17 @@ export type TextInputAttrs = { onenterkey?: (e) => void; onclick?: (e) => void; placeholder?: string; + required?: boolean; tabindex?: number; -}; - -type InputStyleAttrs = { - inputClassName?: string; - darkMode?: boolean; - disabled?: boolean; - size: TextInputSize; - validationStatus?: ValidationStatus; - displayOnly?: boolean; -}; + value?: string; +} & InputStyleAttrs; -type InputInternalStyleAttrs = { +export type InputInternalStyleAttrs = { hasRightIcon?: boolean; isTyping: boolean; }; -type MessageRowAttrs = { +export type MessageRowAttrs = { hasFeedback?: boolean; label: string; statusMessage?: string; @@ -54,8 +57,8 @@ type MessageRowAttrs = { }; export class MessageRow implements m.ClassComponent { - view(vnode) { - const { hasFeedback, label, statusMessage, validationStatus, displayOnly } = + view(vnode: VnodeDOM) { + const { hasFeedback, label, statusMessage, validationStatus } = vnode.attrs; return ( @@ -88,13 +91,14 @@ export class CWTextInput implements m.ClassComponent { private statusMessage?: string = ''; private validationStatus?: ValidationStatus = undefined; - view(vnode) { + view(vnode: VnodeDOM) { const { autocomplete = 'off', autofocus, containerClassName, darkMode, - value, + displayOnly, + defaultValue, disabled, iconRight, iconRightonclick, @@ -107,9 +111,10 @@ export class CWTextInput implements m.ClassComponent { onenterkey, onclick, placeholder, + required, size = 'large', tabindex, - displayOnly, + value, } = vnode.attrs; return ( @@ -148,13 +153,17 @@ export class CWTextInput implements m.ClassComponent { darkMode, inputClassName, })} + defaultValue={defaultValue} disabled={disabled || displayOnly} tabindex={tabindex} maxlength={maxlength} name={name} placeholder={placeholder} + required={required} oninput={(e) => { - if (oninput) oninput(e); + _.debounce(() => { + if (oninput) oninput(e); + }, 250)(); if (e.target.value?.length === 0) { this.isTyping = false; @@ -168,7 +177,7 @@ export class CWTextInput implements m.ClassComponent { const timeout = e.target.value?.length > 3 ? 250 : 1000; this.inputTimeout = setTimeout(() => { this.isTyping = false; - if (inputValidationFn && e.target.value?.length > 3) { + if (inputValidationFn && e.target.value?.length > 0) { [this.validationStatus, this.statusMessage] = inputValidationFn(e.target.value); m.redraw(); diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/types.ts b/packages/commonwealth/client/scripts/views/components/component_kit/types.ts index 59e366899fa..86b546eb32a 100644 --- a/packages/commonwealth/client/scripts/views/components/component_kit/types.ts +++ b/packages/commonwealth/client/scripts/views/components/component_kit/types.ts @@ -39,6 +39,7 @@ export enum ComponentType { TextArea = 'TextArea', TextInput = 'TextInput', ThreadVoteButton = 'ThreadVoteButton', + TokenInput = 'TokenInput', Toggle = 'Toggle', ValidationText = 'ValidationText', WalletOptionRow = 'WalletOptionRow', @@ -49,23 +50,31 @@ export type StyleAttrs = { className?: string; }; +export type DividerMenuItem = { type: 'divider' }; + +export type HeaderMenuItem = { type: 'header'; label: string }; + +export type DefaultMenuItem = { + disabled?: boolean; + iconLeft?: IconName; + iconRight?: IconName; + isSecondary?: boolean; + label: string; + onclick?: () => void; + type?: 'default'; +}; + +export type NotificationMenuItem = { + hasUnreads: boolean; + iconLeft?: IconName; + iconRight?: IconName; + label: string; + onclick: () => void; + type: 'notification'; +}; + export type MenuItem = - | { type: 'divider' } - | { type: 'header'; label: string } - | { - disabled?: boolean; - iconLeft?: IconName; - iconRight?: IconName; - isSecondary?: boolean; - label: string; - onclick: () => void; - type?: 'default'; - } - | { - hasUnreads: boolean; - iconLeft?: IconName; - iconRight?: IconName; - label: string; - onclick: () => void; - type: 'notification'; - }; + | DividerMenuItem + | HeaderMenuItem + | DefaultMenuItem + | NotificationMenuItem; diff --git a/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss b/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss index 32f5ea2fc42..2ac04c6d0db 100644 --- a/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss +++ b/packages/commonwealth/client/styles/components/component_kit/cw_dropdown.scss @@ -1,4 +1,5 @@ @import 'shared'; +@import './cw_popover/cw_popover_menu'; .dropdown-wrapper { position: relative; @@ -8,9 +9,14 @@ border-radius: $border-radius-corners; box-shadow: $elevation-3; margin-top: 5px; - overflow: hidden; + max-height: calc(6 * $menu-item-height); + overflow: auto; position: absolute; width: 100%; z-index: 1001; } + + input:disabled { + cursor: pointer; + } } diff --git a/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss b/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss index f5dcfa64457..464c66560bd 100644 --- a/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss +++ b/packages/commonwealth/client/styles/components/component_kit/cw_popover/cw_popover_menu.scss @@ -1,10 +1,13 @@ @import 'shared'; +$menu-item-height: 36px; + .PopoverMenuItem { align-items: center; cursor: pointer; display: flex; gap: 4px; + height: $menu-item-height; padding: 8px 16px; user-select: none;