terrier-engine 4.74.0 → 4.75.1

package/terrier/images/raw/icon-surprised.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-surprised</title>
+    <g id="icon-surprised" stroke="none" fill="none">
+        <circle id="Oval-3" fill-opacity="0.25" fill="#000000" fill-rule="nonzero" cx="16" cy="16" r="11"></circle>
+        <ellipse id="Oval-6" fill="#000000" fill-rule="evenodd" cx="16" cy="21" rx="3" ry="4"></ellipse>
+        <circle id="Oval" stroke="#000000" stroke-width="2" cx="16" cy="16" r="11"></circle>
+        <ellipse id="Oval-4" fill="#000000" fill-rule="evenodd" cx="12" cy="14" rx="1.5" ry="2"></ellipse>
+        <ellipse id="Oval-5" fill="#000000" fill-rule="evenodd" cx="20" cy="14" rx="1.5" ry="2"></ellipse>
+        <path d="M10,9 C10.5333333,9.33333333 11.2,9.5 12,9.5 C12.8,9.5 13.4666667,9.33333333 14,9" id="Path" stroke="#000000" stroke-width="2" stroke-linecap="round" transform="translate(12, 9.25) scale(1, -1) rotate(15) translate(-12, -9.25)"></path>
+        <path d="M18,9 C18.5333333,9.33333333 19.2,9.5 20,9.5 C20.8,9.5 21.4666667,9.33333333 22,9" id="Path-2" stroke="#000000" stroke-width="2" stroke-linecap="round" transform="translate(20, 9.25) scale(1, -1) rotate(-15) translate(-20, -9.25)"></path>
+    </g>
+</svg>

package/terrier/parts/multi-select-field-part.ts

@@ -0,0 +1,138 @@
+import Messages from "tuff-core/messages"
+import { PartTag } from "tuff-core/parts"
+import { SelectOption, SelectOptions } from "tuff-core/forms"
+import TerrierPart from "./terrier-part"
+
+export type MultiSelectFieldState = {
+    options: SelectOptions
+    selected_values: string[]
+    placeholder?: string
+    name?: string
+    disabled?: boolean
+}
+
+export class MultiSelectFieldPart extends TerrierPart<MultiSelectFieldState> {
+    selectionChangedKey = Messages.typedKey<{ selected_values: string[] }>()
+    protected addOptionKey = Messages.untypedKey()
+    protected removeValueKey = Messages.typedKey<{ value: string }>()
+
+    async init() {
+        await super.init()
+
+        this.onChange(this.addOptionKey, m => {
+            if (m.value?.length) this.addValue(m.value)
+        })
+
+        this.onClick(this.removeValueKey, m => {
+            this.removeValue(m.data.value)
+        })
+    }
+
+    get parentClasses(): Array<string> {
+        const classes = ['tt-multi-select-field', ...super.parentClasses]
+        if (this.state.disabled) classes.push('disabled')
+        return classes
+    }
+
+
+    /// Selection
+
+    get selectedValues(): string[] {
+        return this.state.selected_values
+    }
+
+    setSelectedValues(values: string[]) {
+        this.state.selected_values = [...values]
+        this.onSelectionChanged()
+    }
+
+    addValue(value: string) {
+        if (this.state.selected_values.includes(value)) return
+        this.state.selected_values = [...this.state.selected_values, value]
+        this.onSelectionChanged()
+    }
+
+    removeValue(value: string) {
+        if (!this.state.selected_values.includes(value)) return
+        this.state.selected_values = this.state.selected_values.filter(v => v != value)
+        this.onSelectionChanged()
+    }
+
+    protected onSelectionChanged() {
+        this.dirty()
+        this.emitMessage(this.selectionChangedKey, { selected_values: this.state.selected_values })
+    }
+
+
+    /// Options
+
+    protected get flatOptions(): SelectOption[] {
+        return this.state.options.flatMap(opt => 'group' in opt ? opt.options : [opt])
+    }
+
+    titleForValue(value: string): string {
+        return this.flatOptions.find(opt => `${opt.value}` == value)?.title ?? value
+    }
+
+    protected isSelectable(opt: SelectOption): boolean {
+        return opt.value != null && `${opt.value}`.length > 0
+    }
+
+    protected isSelected(value: string | null): boolean {
+        return value != null && this.state.selected_values.includes(`${value}`)
+    }
+
+
+    /// Rendering
+
+    render(parent: PartTag) {
+        parent.div('.tt-multi-select-field-container', container => {
+            this.renderAddSelect(container)
+            this.renderChips(container)
+            if (this.state.name) {
+                container.input('.tt-multi-select-values', {
+                    type: 'hidden',
+                    name: this.state.name,
+                    value: this.state.selected_values.join(',')
+                })
+            }
+        })
+    }
+    protected renderAddSelect(parent: PartTag) {
+        const blankText = this.state.selected_values.length ? '' : (this.state.placeholder ?? 'Select…')
+        parent.select('.tt-multi-select-add', this.state.disabled ? { disabled: true } : {}, select => {
+            select.option({ value: '', text: blankText })
+            for (const opt of this.state.options) {
+                if ('group' in opt) {
+                    const available = opt.options.filter(o => this.isSelectable(o) && !this.isSelected(o.value))
+                    if (!available.length) continue
+                    select.optgroup({ label: opt.group }, group => {
+                        for (const o of available) this.renderAddOption(group, o)
+                    })
+                } else if (this.isSelectable(opt) && !this.isSelected(opt.value)) {
+                    this.renderAddOption(select, opt)
+                }
+            }
+        }).emitChange(this.addOptionKey)
+    }
+
+    protected renderAddOption(parent: PartTag, opt: SelectOption) {
+        parent.option({ value: `${opt.value}`, text: opt.title })
+    }
+    protected renderChips(parent: PartTag) {
+        parent.div('.tt-multi-select-chips', container => {
+            for (const value of this.state.selected_values) {
+                container.div('.tt-multi-select-chip', chip => {
+                    chip.div('.tt-multi-select-chip-label', { text: this.titleForValue(value) })
+                    if (!this.state.disabled) {
+                        chip.a('.tt-multi-select-chip-remove')
+                            .emitClick(this.removeValueKey, { value })
+                    }
+                })
+            }
+        })
+    }
+
+}
+
+export default MultiSelectFieldPart