Skip to content

Commit

Permalink
Begin replace select test panel fixes (#669)
Browse files Browse the repository at this point in the history
  • Loading branch information
@leogretz2
leogretz2 authored Aug 17, 2023
1 parent 5fbabe9 commit 76b8b4a
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 98 deletions.
11 changes: 8 additions & 3 deletions client-app/src/admin/tests/Select/SelectTestPanel.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
.select-test-panel {
.xh-vbox {
.tb-select-test-panel {
&__column {
margin: var(--xh-pad-px);
padding: var(--xh-pad-px);
border: var(--xh-border-solid);
background: var(--xh-bg);
overflow-y: auto;
flex: 1;
}

p {
font-size: var(--xh-font-size-large-px);
&:not(:first-child) {
margin-top: 20px;
}
border-bottom: var(--xh-border-solid);
}

.xh-input {
Expand Down
200 changes: 105 additions & 95 deletions client-app/src/admin/tests/Select/SelectTestPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {creates, hoistCmp, XH} from '@xh/hoist/core';
import {restaurants} from '../../../core/data';
import {panel} from '@xh/hoist/desktop/cmp/panel';
import {numberInput, select} from '@xh/hoist/desktop/cmp/input';
import {box, div, fragment, hbox, label, p, vbox} from '@xh/hoist/cmp/layout';
import {box, div, fragment, hbox, label, p} from '@xh/hoist/cmp/layout';
import {Icon} from '@xh/hoist/icon/Icon';

import {usStates} from '../../../core/data';
Expand All @@ -17,101 +17,111 @@ export const SelectTestPanel = hoistCmp({
render({model}) {
return panel({
title: 'Select tests',
className: 'select-test-panel xh-tiled-bg',
className: 'tb-select-test-panel xh-tiled-bg',
item: hbox(
vbox(
example({
name: 'Select',
bind: 'selectValue',
selectProps: restaurantProps
}),
example({
name: 'Select enableCreate',
bind: 'creatableValue',
selectProps: {...restaurantProps, enableCreate: true}
}),
example({
name: 'Select queryFn & optionRenderer',
bind: 'asyncValue',
selectProps: customerProps
}),
example({
name: 'Select queryFn & enableCreate & optionRenderer & enableTooltips',
bind: 'asyncCreatableValue',
selectProps: {...customerProps, enableCreate: true, enableTooltips: true}
}),
example({
name: 'Select (with grouped options)',
bind: 'groupedValue',
selectProps: {
options: desserts
}
}),
example({
name: 'Select (with Object options)',
bind: 'objectValue',
selectProps: {
options: recipes
}
})
),
vbox(
example({
name: 'Select (with many options) enableWindowed & leftIcon',
bind: 'bigValue',
selectProps: {
leftIcon: Icon.search(),
options: model.bigOptions,
enableWindowed: true,
placeholder: 'Select a number...'
}
}),
hbox(label('number of options: '), numberInput({bind: 'numOptions'})),
example({
name: 'Select with leftIcon & object options & hideDropdownIndicator:true',
bind: 'objectValue2',
selectProps: {
leftIcon: Icon.search(),
hideDropdownIndicator: true,
options: recipes
}
}),
example({
name: 'Select with leftIcon & queryFn & enableCreate & optionRenderer',
bind: 'asyncCreatableValue2',
selectProps: {
...customerProps,
leftIcon: Icon.office(),
enableCreate: true
}
}),
example({
name: 'Select with leftIcon & enableMulti',
bind: 'enableMultiLeftIcon',
selectProps: {
width: 350,
options: usStates,
leftIcon: Icon.globe(),
enableMulti: true,
placeholder: 'Select state(s)...'
}
}),
example({
name: 'Select with leftIcon & enableMulti & enableTooltips & enableClear & rsOptions: {hideSelectedOptions: false, closeMenuOnSelect: false}',
bind: 'enableMultiMenuOpen',
selectProps: {
width: 200,
options: usStates,
leftIcon: Icon.globe(),
enableMulti: true,
enableTooltips: true,
placeholder: 'Select state(s)...',
enableClear: true,
hideSelectedOptions: false,
closeMenuOnSelect: false
}
})
)
div({
className: 'tb-select-test-panel__column',
items: [
example({
name: 'Select',
bind: 'selectValue',
selectProps: restaurantProps
}),
example({
name: 'Select enableCreate',
bind: 'creatableValue',
selectProps: {...restaurantProps, enableCreate: true}
}),
example({
name: 'Select queryFn & optionRenderer',
bind: 'asyncValue',
selectProps: customerProps
}),
example({
name: 'Select queryFn & enableCreate & optionRenderer & enableTooltips',
bind: 'asyncCreatableValue',
selectProps: {
...customerProps,
enableCreate: true,
enableTooltips: true
}
}),
example({
name: 'Select (with grouped options)',
bind: 'groupedValue',
selectProps: {
options: desserts
}
}),
example({
name: 'Select (with Object options)',
bind: 'objectValue',
selectProps: {
options: recipes
}
})
]
}),
div({
className: 'tb-select-test-panel__column',
items: [
example({
name: 'Select (with many options) enableWindowed & leftIcon',
bind: 'bigValue',
selectProps: {
leftIcon: Icon.search(),
options: model.bigOptions,
enableWindowed: true,
placeholder: 'Select a number...'
}
}),
hbox(label('number of options: '), numberInput({bind: 'numOptions'})),
example({
name: 'Select with leftIcon & object options & hideDropdownIndicator:true',
bind: 'objectValue2',
selectProps: {
leftIcon: Icon.search(),
hideDropdownIndicator: true,
options: recipes
}
}),
example({
name: 'Select with leftIcon & queryFn & enableCreate & optionRenderer',
bind: 'asyncCreatableValue2',
selectProps: {
...customerProps,
leftIcon: Icon.office(),
enableCreate: true
}
}),
example({
name: 'Select with leftIcon & enableMulti',
bind: 'enableMultiLeftIcon',
selectProps: {
width: 350,
options: usStates,
leftIcon: Icon.globe(),
enableMulti: true,
placeholder: 'Select state(s)...'
}
}),
example({
name: 'Select with leftIcon & enableMulti & enableTooltips & enableClear & rsOptions: {hideSelectedOptions: false, closeMenuOnSelect: false}',
bind: 'enableMultiMenuOpen',
selectProps: {
width: 200,
options: usStates,
leftIcon: Icon.globe(),
enableMulti: true,
enableTooltips: true,
placeholder: 'Select state(s)...',
enableClear: true,
hideSelectedOptions: false,
closeMenuOnSelect: false
}
})
]
})
)
});
}
Expand Down

0 comments on commit 76b8b4a

Please sign in to comment.