Skip to content

Commit

Permalink
Mj.add multi select to sandboxes (#1252)
Browse files Browse the repository at this point in the history 
* docs(react): update basic form with multi-select

* docs: angular form with multi select

* docs: vue form multi-select

* docs: html form with multi select
  • Loading branch information
@micahjones13
micahjones13 authored Oct 30, 2023
1 parent 3980bf0 commit 9324685
Show file tree
Hide file tree
Showing 7 changed files with 140 additions and 20 deletions.
14 changes: 14 additions & 0 deletions ...omponents/src/stories/astro-sandboxes/forms/angular/basic-form/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,20 @@
<rux-option value="Canada" label="Canada"></rux-option>
</rux-select>
</div>
<div>
<rux-select multiple formControlName="multiSelect">
<rux-option-group label="Group 1">
<rux-option label="Option 1.1" value="1.1"></rux-option>
<rux-option label="Option 2.1" value="2.1"></rux-option>
<rux-option label="Option 3.1" value="3.1"></rux-option>
</rux-option-group>
<rux-option-group label="Group 2">
<rux-option label="Option 1.2" value="1.2"></rux-option>
<rux-option label="Option 2.2" value="2.2"></rux-option>
<rux-option label="Option 3.2" value="3.2"></rux-option>
</rux-option-group>
</rux-select>
</div>
<div>
<rux-checkbox-group label="Things">
<rux-checkbox
Expand Down
11 changes: 8 additions & 3 deletions ...-components/src/stories/astro-sandboxes/forms/angular/basic-form/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export class AppComponent {
lastName: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required]),
country: new FormControl(''),
things: new FormControl([]),
things: new FormControl(['']),
multiSelect: new FormControl([]),
options: new FormControl(''),
range: new FormControl(''),
})
Expand All @@ -28,13 +29,15 @@ export class AppComponent {
things,
options,
range,
multiSelect,
} = this.profileForm.value

alert(`
First Name: ${firstName} \n
Last Name: ${lastName} \n
Email: ${email} \n
Country/Region: ${country} \n
Multi Select: ${multiSelect} \n
Options: ${options} \n
Things: ${things} \n
Range: ${range} \n
Expand All @@ -47,9 +50,11 @@ export class AppComponent {
this.profileForm.get(fieldName)?.touched
)
}
handleThings(value: string, event: CustomEvent) {
handleThings(value: string, event: any) {
const target = event.target as HTMLInputElement
const notifications = [...this.profileForm.get('things')?.value]
const notifications: string[] = [
...(<[]>this.profileForm.get('things')?.value),
]

if (target.checked) {
this.profileForm.patchValue({
Expand Down
65 changes: 52 additions & 13 deletions packages/web-components/src/stories/astro-sandboxes/forms/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
}
</style>
</head>

<body>
<div style="width: 60%; margin: auto">
<form style="padding: 1rem" method="POST" action="/">
Expand All @@ -49,30 +50,43 @@
<rux-option value="Canada" label="Canada"></rux-option>
</rux-select>
</div>
<div>
<rux-select
multiple
label="Multi-Select"
name="multi"
id="multi"
>
<rux-option-group label="Group 1">
<rux-option label="Option 1" value="1"></rux-option>
<rux-option label="Option 2" value="2"></rux-option>
<rux-option label="Option 3" value="3"></rux-option>
</rux-option-group>
<rux-option-group label="Group 2">
<rux-option label="Option 4" value="4"></rux-option>
<rux-option label="Option 5" value="5"></rux-option>
<rux-option label="Option 6" value="6"></rux-option>
</rux-option-group>
</rux-select>
</div>
<div>
<rux-checkbox-group label="Things">
<rux-checkbox name="things" value="comments">
<rux-checkbox name="comments" value="comments">
Comments
</rux-checkbox>
<rux-checkbox name="things" value="offers">
<rux-checkbox name="offers" value="offers">
Offers
</rux-checkbox>
<rux-checkbox name="things" value="events">
<rux-checkbox name="events" value="events">
Events
</rux-checkbox>
</rux-checkbox-group>
</div>
<div>
<rux-radio-group label="Options">
<rux-radio name="options" value="everything">
Everything
</rux-radio>
<rux-radio name="options" value="same">
Same
</rux-radio>
<rux-radio name="options" value="none">
None
</rux-radio>
<rux-radio-group label="Options" name="options">
<rux-radio value="everything"> Everything </rux-radio>
<rux-radio value="same"> Same </rux-radio>
<rux-radio value="none"> None </rux-radio>
</rux-radio-group>
</div>
<div>
Expand All @@ -83,5 +97,30 @@
</div>
</form>
</div>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
e.preventDefault()
const formData = new FormData(form)

const allThings = [
formData.get('comments'),
formData.get('offers'),
formData.get('events'),
]
console.log(allThings)

alert(`
First name: ${formData.get('firstName')} \n
Last name: ${formData.get('lastName')}\n
Email: ${formData.get('email')} \n
Country / Region: ${formData.get('country')} \n
Multi-select: ${formData.getAll('multi')}\n
Things: ${allThings[0]}, ${allThings[1]}, ${allThings[2]} \n
Options: ${formData.get('options')} \n
Range: ${formData.get('range')} \n
`)
})
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions packages/web-components/src/stories/astro-sandboxes/forms/react/basic/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"keywords": [],
"main": "src/index.js",
"dependencies": {
"@astrouxds/astro-web-components": "^7.3.0",
"@astrouxds/react": "^7.3.0",
"@astrouxds/astro-web-components": "^7.17.1",
"@astrouxds/react": "^7.17.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "5.0.1"
Expand Down
42 changes: 42 additions & 0 deletions packages/web-components/src/stories/astro-sandboxes/forms/react/basic/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ import {
RuxSlider,
RuxButton,
RuxOption,
RuxOptionGroup,
} from '@astrouxds/react'
export default function App() {
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [email, setEmail] = useState('')
const [countryRegion, setCountryRegion] = useState('United States')
const [multiSelect, setMultiSelect] = useState([])
const [options, setOptions] = useState('')
const [range, setRange] = useState(50)
const [things, setThings] = useState([])
Expand All @@ -27,6 +29,7 @@ export default function App() {
Last Name: ${lastName} \n
Email: ${email} \n
Country/Region: ${countryRegion} \n
MultiSelect: ${multiSelect} \n
Options: ${options} \n
Things: ${things} \n
Range: ${range} \n
Expand All @@ -42,6 +45,9 @@ export default function App() {
setThings(arr.filter((item) => item !== e.target.value))
}
}
const handleMultiple = (e) => {
setMultiSelect((multiSelect) => [...multiSelect, e.target.value])
}
return (
<div className="container">
<form onSubmit={(e) => handleSubmit(e)}>
Expand Down Expand Up @@ -78,6 +84,42 @@ export default function App() {
></RuxOption>
</RuxSelect>
</div>
<div>
<RuxSelect
multiple
label="Multi-Select"
onRuxchange={(e) => handleMultiple(e)}
>
<RuxOptionGroup label="Group 1">
<RuxOption
label="Option 1"
value="Option 1"
></RuxOption>
<RuxOption
label="Option 2"
value="Option 2"
></RuxOption>
<RuxOption
label="Option 3"
value="Option 3"
></RuxOption>
</RuxOptionGroup>
<RuxOptionGroup label="Group 2">
<RuxOption
label="Option 2.1"
value="Option 2.1"
></RuxOption>
<RuxOption
label="Option 2.2"
value="Option 2.2"
></RuxOption>
<RuxOption
label="Option 2.3"
value="Option 2.3"
></RuxOption>
</RuxOptionGroup>
</RuxSelect>
</div>
<div>
<RuxCheckboxGroup label="Things">
<RuxCheckbox
Expand Down
22 changes: 21 additions & 1 deletion packages/web-components/src/stories/astro-sandboxes/forms/vue/basic/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,20 @@
<rux-option value="Canada" label="Canada"></rux-option>
</rux-select>
</div>

<div>
<rux-select multiple @ruxchange="updateMulti($event)">
<rux-option-group label="Group 1">
<rux-option label="Option 1" value="1"></rux-option>
<rux-option label="Option 2" value="2"></rux-option>
<rux-option label="Option 3" value="3"></rux-option>
</rux-option-group>
<rux-option-group label="Group 2">
<rux-option label="Option 4" value="4"></rux-option>
<rux-option label="Option 5" value="5"></rux-option>
<rux-option label="Option 6" value="6"></rux-option>
</rux-option-group>
</rux-select>
</div>
<div>
<rux-checkbox-group label="Things">
<rux-checkbox
Expand Down Expand Up @@ -119,6 +132,7 @@ export default {
lastName: '',
email: '',
country: 'USA',
multi: [],
options: 'none',
things: [],
range: '',
Expand Down Expand Up @@ -149,6 +163,12 @@ export default {
)
}
},
updateMulti(event) {
const value = event.target.value
this.form.multi = this.form.multi.concat(value)
const unique = new Set(this.form.multi)
this.form.multi = Array.from(unique)
},
},
}
</script>
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/src/stories/astro-sandboxes/forms/vue/basic/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Vue.config.productionTip = false
Vue.config.ignoredElements = [/rux-\w*/]

// // Bind the custom elements to the window object
// Bind the custom elements to the window object
applyPolyfills().then(() => {
defineCustomElements()
})
Expand Down

0 comments on commit 9324685

Please sign in to comment.