@workday/canvas-kit-docs 10.3.4 → 10.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es6/lib/docs.js +165 -12
- package/dist/es6/lib/specs.js +16 -0
- package/dist/mdx/react/select/Select.mdx +82 -7
- package/dist/mdx/react/select/examples/Basic.tsx +1 -1
- package/dist/mdx/react/select/examples/Complex.tsx +11 -16
- package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx +103 -0
- package/dist/mdx/react/select/examples/Grow.tsx +1 -5
- package/dist/mdx/react/select/examples/HoistedModel.tsx +8 -15
- package/dist/mdx/react/select/examples/InitialSelectedItem.tsx +60 -0
- package/dist/mdx/react/select/examples/LabelPosition.tsx +1 -3
- package/dist/mdx/react/select/examples/Placeholder.tsx +41 -0
- package/dist/mdx/react/select/examples/RefForwarding.tsx +1 -0
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -78745,6 +78745,30 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
78745
78745
|
}
|
|
78746
78746
|
],
|
|
78747
78747
|
"tags": {}
|
|
78748
|
+
},
|
|
78749
|
+
{
|
|
78750
|
+
"kind": "property",
|
|
78751
|
+
"name": "item",
|
|
78752
|
+
"required": false,
|
|
78753
|
+
"type": {
|
|
78754
|
+
"kind": "symbol",
|
|
78755
|
+
"name": "Item",
|
|
78756
|
+
"typeParameters": [
|
|
78757
|
+
{
|
|
78758
|
+
"kind": "primitive",
|
|
78759
|
+
"value": "any"
|
|
78760
|
+
}
|
|
78761
|
+
],
|
|
78762
|
+
"value": "Item<T>"
|
|
78763
|
+
},
|
|
78764
|
+
"description": "",
|
|
78765
|
+
"declarations": [
|
|
78766
|
+
{
|
|
78767
|
+
"name": "item",
|
|
78768
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemAllowChildStrings.ts"
|
|
78769
|
+
}
|
|
78770
|
+
],
|
|
78771
|
+
"tags": {}
|
|
78748
78772
|
}
|
|
78749
78773
|
]
|
|
78750
78774
|
},
|
|
@@ -191589,6 +191613,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
191589
191613
|
}
|
|
191590
191614
|
],
|
|
191591
191615
|
"tags": {}
|
|
191616
|
+
},
|
|
191617
|
+
{
|
|
191618
|
+
"kind": "property",
|
|
191619
|
+
"name": "placeholder",
|
|
191620
|
+
"required": false,
|
|
191621
|
+
"type": {
|
|
191622
|
+
"kind": "primitive",
|
|
191623
|
+
"value": "string"
|
|
191624
|
+
},
|
|
191625
|
+
"description": "",
|
|
191626
|
+
"declarations": [
|
|
191627
|
+
{
|
|
191628
|
+
"name": "placeholder",
|
|
191629
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/hooks/useSelectInput.ts"
|
|
191630
|
+
}
|
|
191631
|
+
],
|
|
191632
|
+
"tags": {}
|
|
191592
191633
|
}
|
|
191593
191634
|
]
|
|
191594
191635
|
},
|
|
@@ -191648,6 +191689,112 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
191648
191689
|
"tags": {},
|
|
191649
191690
|
"declarations": []
|
|
191650
191691
|
},
|
|
191692
|
+
{
|
|
191693
|
+
"kind": "property",
|
|
191694
|
+
"name": "onChange",
|
|
191695
|
+
"required": true,
|
|
191696
|
+
"type": {
|
|
191697
|
+
"kind": "function",
|
|
191698
|
+
"parameters": [
|
|
191699
|
+
{
|
|
191700
|
+
"kind": "parameter",
|
|
191701
|
+
"name": "event",
|
|
191702
|
+
"type": {
|
|
191703
|
+
"kind": "symbol",
|
|
191704
|
+
"name": "React.ChangeEvent",
|
|
191705
|
+
"typeParameters": [
|
|
191706
|
+
{
|
|
191707
|
+
"kind": "symbol",
|
|
191708
|
+
"name": "HTMLInputElement",
|
|
191709
|
+
"value": "HTMLInputElement"
|
|
191710
|
+
}
|
|
191711
|
+
],
|
|
191712
|
+
"value": "ChangeEvent<T>"
|
|
191713
|
+
},
|
|
191714
|
+
"required": true,
|
|
191715
|
+
"rest": false,
|
|
191716
|
+
"description": "",
|
|
191717
|
+
"declarations": [
|
|
191718
|
+
{
|
|
191719
|
+
"name": "event",
|
|
191720
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/hooks/useSelectInput.ts"
|
|
191721
|
+
}
|
|
191722
|
+
],
|
|
191723
|
+
"tags": {}
|
|
191724
|
+
}
|
|
191725
|
+
],
|
|
191726
|
+
"members": [],
|
|
191727
|
+
"returnType": {
|
|
191728
|
+
"kind": "primitive",
|
|
191729
|
+
"value": "void"
|
|
191730
|
+
}
|
|
191731
|
+
},
|
|
191732
|
+
"description": "",
|
|
191733
|
+
"tags": {},
|
|
191734
|
+
"declarations": []
|
|
191735
|
+
},
|
|
191736
|
+
{
|
|
191737
|
+
"kind": "property",
|
|
191738
|
+
"name": "autoComplete",
|
|
191739
|
+
"required": true,
|
|
191740
|
+
"type": {
|
|
191741
|
+
"kind": "string",
|
|
191742
|
+
"value": "off"
|
|
191743
|
+
},
|
|
191744
|
+
"description": "",
|
|
191745
|
+
"tags": {},
|
|
191746
|
+
"declarations": []
|
|
191747
|
+
},
|
|
191748
|
+
{
|
|
191749
|
+
"kind": "property",
|
|
191750
|
+
"name": "onFocus",
|
|
191751
|
+
"required": true,
|
|
191752
|
+
"type": {
|
|
191753
|
+
"kind": "function",
|
|
191754
|
+
"parameters": [],
|
|
191755
|
+
"members": [],
|
|
191756
|
+
"returnType": {
|
|
191757
|
+
"kind": "primitive",
|
|
191758
|
+
"value": "void"
|
|
191759
|
+
}
|
|
191760
|
+
},
|
|
191761
|
+
"description": "",
|
|
191762
|
+
"tags": {},
|
|
191763
|
+
"declarations": []
|
|
191764
|
+
},
|
|
191765
|
+
{
|
|
191766
|
+
"kind": "property",
|
|
191767
|
+
"name": "textInputProps",
|
|
191768
|
+
"required": true,
|
|
191769
|
+
"type": {
|
|
191770
|
+
"kind": "object",
|
|
191771
|
+
"properties": [
|
|
191772
|
+
{
|
|
191773
|
+
"kind": "property",
|
|
191774
|
+
"name": "ref",
|
|
191775
|
+
"required": true,
|
|
191776
|
+
"type": {
|
|
191777
|
+
"kind": "symbol",
|
|
191778
|
+
"name": "RefObject",
|
|
191779
|
+
"typeParameters": [
|
|
191780
|
+
{
|
|
191781
|
+
"kind": "symbol",
|
|
191782
|
+
"name": "HTMLInputElement",
|
|
191783
|
+
"value": "any"
|
|
191784
|
+
}
|
|
191785
|
+
],
|
|
191786
|
+
"value": "any"
|
|
191787
|
+
},
|
|
191788
|
+
"description": "",
|
|
191789
|
+
"tags": {},
|
|
191790
|
+
"declarations": []
|
|
191791
|
+
}
|
|
191792
|
+
]
|
|
191793
|
+
},
|
|
191794
|
+
"description": "",
|
|
191795
|
+
"tags": {},
|
|
191796
|
+
"declarations": []
|
|
191797
|
+
},
|
|
191651
191798
|
{
|
|
191652
191799
|
"kind": "property",
|
|
191653
191800
|
"name": "ref",
|
|
@@ -191694,18 +191841,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
191694
191841
|
"tags": {},
|
|
191695
191842
|
"declarations": []
|
|
191696
191843
|
},
|
|
191697
|
-
{
|
|
191698
|
-
"kind": "property",
|
|
191699
|
-
"name": "autoComplete",
|
|
191700
|
-
"required": true,
|
|
191701
|
-
"type": {
|
|
191702
|
-
"kind": "string",
|
|
191703
|
-
"value": "off"
|
|
191704
|
-
},
|
|
191705
|
-
"description": "",
|
|
191706
|
-
"tags": {},
|
|
191707
|
-
"declarations": []
|
|
191708
|
-
},
|
|
191709
191844
|
{
|
|
191710
191845
|
"kind": "property",
|
|
191711
191846
|
"name": "defaultValue",
|
|
@@ -198545,6 +198680,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
198545
198680
|
],
|
|
198546
198681
|
"tags": {}
|
|
198547
198682
|
},
|
|
198683
|
+
{
|
|
198684
|
+
"kind": "property",
|
|
198685
|
+
"name": "cs",
|
|
198686
|
+
"required": false,
|
|
198687
|
+
"type": {
|
|
198688
|
+
"kind": "symbol",
|
|
198689
|
+
"name": "CSToPropsInput",
|
|
198690
|
+
"value": "CSToPropsInput"
|
|
198691
|
+
},
|
|
198692
|
+
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
198693
|
+
"declarations": [
|
|
198694
|
+
{
|
|
198695
|
+
"name": "cs",
|
|
198696
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
198697
|
+
}
|
|
198698
|
+
],
|
|
198699
|
+
"tags": {}
|
|
198700
|
+
},
|
|
198548
198701
|
{
|
|
198549
198702
|
"kind": "property",
|
|
198550
198703
|
"name": "children",
|
package/dist/es6/lib/specs.js
CHANGED
|
@@ -4946,6 +4946,22 @@ module.exports = {specifications: [
|
|
|
4946
4946
|
]
|
|
4947
4947
|
}
|
|
4948
4948
|
]
|
|
4949
|
+
},
|
|
4950
|
+
{
|
|
4951
|
+
"type": "describe",
|
|
4952
|
+
"name": "given the \"FetchingDynamicItems\" story is rendered",
|
|
4953
|
+
"children": [
|
|
4954
|
+
{
|
|
4955
|
+
"type": "describe",
|
|
4956
|
+
"name": "when Get Items is clicked",
|
|
4957
|
+
"children": [
|
|
4958
|
+
{
|
|
4959
|
+
"type": "it",
|
|
4960
|
+
"name": "should change the value of the select to 456 (the id) after 1.5 seconds"
|
|
4961
|
+
}
|
|
4962
|
+
]
|
|
4963
|
+
}
|
|
4964
|
+
]
|
|
4949
4965
|
}
|
|
4950
4966
|
]
|
|
4951
4967
|
},
|
|
@@ -15,6 +15,9 @@ import Required from './examples/Required';
|
|
|
15
15
|
import MenuHeight from './examples/MenuHeight';
|
|
16
16
|
import HoistedModel from './examples/HoistedModel';
|
|
17
17
|
import RefForwarding from './examples/RefForwarding';
|
|
18
|
+
import FetchingDynamicItems from './examples/FetchingDynamicItems';
|
|
19
|
+
import Placeholder from './examples/Placeholder';
|
|
20
|
+
import InitialSelectedItem from './examples/InitialSelectedItem';
|
|
18
21
|
|
|
19
22
|
|
|
20
23
|
# Canvas Kit Select
|
|
@@ -74,6 +77,10 @@ and provides direct access to its `state` and `events` outside of the `Select` c
|
|
|
74
77
|
In this example, we set up external observation of the model state and create an external button to
|
|
75
78
|
trigger an event to change the selected item.
|
|
76
79
|
|
|
80
|
+
**Note: If your array of objects uses an `id` property and a `text` property there is no need to use
|
|
81
|
+
the helper functions of `getId` or `getTextValue`. The collection system and the `Select` use these
|
|
82
|
+
properties by default for keyboard navigation and selected the `id` based on the item clicked.**
|
|
83
|
+
|
|
77
84
|
<ExampleCodeBlock code={HoistedModel} />
|
|
78
85
|
|
|
79
86
|
### Label Position
|
|
@@ -190,18 +197,43 @@ Use the error state when the selection is no longer valid.
|
|
|
190
197
|
|
|
191
198
|
<ExampleCodeBlock code={Error} />
|
|
192
199
|
|
|
200
|
+
### Initial Selected Item
|
|
201
|
+
|
|
202
|
+
You can set `initialSelectedIds` to the value that you want initially selected.
|
|
203
|
+
|
|
204
|
+
<ExampleCodeBlock code={InitialSelectedItem} />
|
|
205
|
+
|
|
206
|
+
### Placeholder
|
|
207
|
+
|
|
208
|
+
You can change the placeholder text by passing in a string value to the `placeholder` attribute on
|
|
209
|
+
the `Select.Input`.
|
|
210
|
+
|
|
211
|
+
<ExampleCodeBlock code={Placeholder} />
|
|
212
|
+
|
|
213
|
+
### Fetching Dynamic Items
|
|
214
|
+
|
|
215
|
+
It's common to load items from a server call. Hoisting the `model` and setting your items on state
|
|
216
|
+
allows you to pass those items to your `model`. You can leverage React state to set your items on
|
|
217
|
+
load as well as displaying a placeholder indicating when items are loaded.
|
|
218
|
+
|
|
219
|
+
**Note: In this case we need to use `getId` and `getTextValue` because our data doesn't have the
|
|
220
|
+
properties of `id` or `text`. Using these helper functions sets the `serverId` to be `id` and
|
|
221
|
+
`label` to be `text`.**
|
|
222
|
+
|
|
223
|
+
<ExampleCodeBlock code={FetchingDynamicItems} />
|
|
224
|
+
|
|
193
225
|
### Complex
|
|
194
226
|
|
|
195
|
-
When registering items in an array of objects, it's common to have
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
227
|
+
When registering items in an array of objects, it's common to have the text that is displayed to the user be
|
|
228
|
+
different than an id. In this example, `serverId` and `label` properties need to be remapped to
|
|
229
|
+
`id` and `text` hence the usage of `getId` and `getTextValue`. If your object has the properties
|
|
230
|
+
`text` and `id`, there would be no need for this.
|
|
199
231
|
|
|
200
232
|
<ExampleCodeBlock code={Complex} />
|
|
201
233
|
|
|
202
|
-
By default, the identifier and text value are `id` and `text` properties respectively. If
|
|
203
|
-
object for each item is different, provide a `getId` or `getTextValue` function to the
|
|
204
|
-
For example
|
|
234
|
+
**Note: By default, the identifier and text value are `id` and `text` properties respectively. If
|
|
235
|
+
your data object for each item is different, provide a `getId` or `getTextValue` function to the
|
|
236
|
+
model config. For example:**
|
|
205
237
|
|
|
206
238
|
```jsx
|
|
207
239
|
const items = [
|
|
@@ -216,6 +248,49 @@ const items = [
|
|
|
216
248
|
</Select>;
|
|
217
249
|
```
|
|
218
250
|
|
|
251
|
+
### When to use `getId`, or `getTextValue`
|
|
252
|
+
|
|
253
|
+
- `getId`: This is an optional function to return the id of an item. If not provided, the default
|
|
254
|
+
function will return the `id` property from the object of each item. If you did not provide
|
|
255
|
+
`items`, do not override this function. Instead provide static
|
|
256
|
+
items via JSX. the list will create an internal array of items where `id` is the only property and
|
|
257
|
+
the default `getId` will return the desired result. **Note: If your array of objects has a
|
|
258
|
+
different property for `id`, like `serverId`, use this function to set the id.**
|
|
259
|
+
|
|
260
|
+
```tsx
|
|
261
|
+
const options = [{text: 'Pizza', serverId: 'pizza-1'}, {text: 'Cheeseburger', serverId: 'cheeseburger'}]
|
|
262
|
+
<Select items={options} getId={(item) => item.serverId}>
|
|
263
|
+
<FormField label="Your Label">
|
|
264
|
+
<Select.Input onChange={e => handleChange(e)} id="contact-select" />
|
|
265
|
+
<Select.Popper>
|
|
266
|
+
<Select.Card>
|
|
267
|
+
<Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
|
|
268
|
+
</Select.Card>
|
|
269
|
+
</Select.Popper>
|
|
270
|
+
</FormField>
|
|
271
|
+
</Select>
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
- `getTextValue`: Optional function to return the text representation of an item. If not provided,
|
|
275
|
+
the default function will return the `text` property of the object of each item or an empty string
|
|
276
|
+
if there is no `text` property. If you did not provide `items`, do not override this function.
|
|
277
|
+
**Note: If your array of objects has a different property for `text`, like `label`, use this
|
|
278
|
+
function to set the text.**
|
|
279
|
+
|
|
280
|
+
```tsx
|
|
281
|
+
const options = [{label: 'Pizza', id: 'pizza-1'}, {label: 'Cheeseburger', id: 'cheeseburger'}]
|
|
282
|
+
<Select items={options} getTextValue={(item) => item.label}>
|
|
283
|
+
<FormField label="Your Label">
|
|
284
|
+
<Select.Input onChange={e => handleChange(e)} id="contact-select" />
|
|
285
|
+
<Select.Popper>
|
|
286
|
+
<Select.Card>
|
|
287
|
+
<Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
|
|
288
|
+
</Select.Card>
|
|
289
|
+
</Select.Popper>
|
|
290
|
+
</FormField>
|
|
291
|
+
</Select>
|
|
292
|
+
```
|
|
293
|
+
|
|
219
294
|
## Component API
|
|
220
295
|
|
|
221
296
|
<SymbolDoc name="Select" fileName="/react/" />
|
|
@@ -23,7 +23,7 @@ export default () => {
|
|
|
23
23
|
<Flex flexDirection="column">
|
|
24
24
|
<Select items={options}>
|
|
25
25
|
<FormField label="Contact">
|
|
26
|
-
<Select.Input onChange={
|
|
26
|
+
<Select.Input onChange={handleChange} />
|
|
27
27
|
<Select.Popper>
|
|
28
28
|
<Select.Card>
|
|
29
29
|
<Select.List>
|
|
@@ -4,14 +4,14 @@ import {Select} from '@workday/canvas-kit-react/select';
|
|
|
4
4
|
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
5
|
|
|
6
6
|
const options = [
|
|
7
|
-
{
|
|
8
|
-
{
|
|
9
|
-
{
|
|
10
|
-
{
|
|
11
|
-
{
|
|
7
|
+
{serverId: 'email', label: 'E-mail'},
|
|
8
|
+
{serverId: 'phone', label: 'Phone'},
|
|
9
|
+
{serverId: 'fax', label: 'Fax'},
|
|
10
|
+
{serverId: 'mail', label: 'Mail'},
|
|
11
|
+
{serverId: 'mobile', label: 'Mobile Phone'},
|
|
12
12
|
{
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
serverId: 'oasis',
|
|
14
|
+
label: 'The Ontologically Anthropocentric Sensory Immersive Simulation',
|
|
15
15
|
},
|
|
16
16
|
];
|
|
17
17
|
|
|
@@ -20,23 +20,18 @@ export default () => {
|
|
|
20
20
|
const [id, setId] = React.useState('');
|
|
21
21
|
|
|
22
22
|
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const handleSelect = ({id}: {id: string}) => {
|
|
27
|
-
setId(id);
|
|
23
|
+
setId(event.target.value);
|
|
24
|
+
setValue(options.find(item => item.serverId === event.target.value).label);
|
|
28
25
|
};
|
|
29
26
|
|
|
30
27
|
return (
|
|
31
28
|
<Flex flexDirection="column">
|
|
32
|
-
<Select items={options}
|
|
29
|
+
<Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
|
|
33
30
|
<FormField label="Contact">
|
|
34
31
|
<Select.Input onChange={e => handleChange(e)} />
|
|
35
32
|
<Select.Popper>
|
|
36
33
|
<Select.Card>
|
|
37
|
-
<Select.List>
|
|
38
|
-
{item => <Select.Item data-id={item.id}>{item.text}</Select.Item>}
|
|
39
|
-
</Select.List>
|
|
34
|
+
<Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
|
|
40
35
|
</Select.Card>
|
|
41
36
|
</Select.Popper>
|
|
42
37
|
</FormField>
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
3
|
+
import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
6
|
+
import {useMount} from '@workday/canvas-kit-react/common';
|
|
7
|
+
|
|
8
|
+
const movieListItems = [
|
|
9
|
+
{
|
|
10
|
+
label: 'The Lion King',
|
|
11
|
+
serverId: '123',
|
|
12
|
+
Year: '2019',
|
|
13
|
+
Runtime: '118 min',
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
label: 'Mowgli: Legend of the Jungle',
|
|
17
|
+
serverId: '234',
|
|
18
|
+
Year: '2018',
|
|
19
|
+
Runtime: '104 min',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
label: 'Doctor Strange',
|
|
23
|
+
serverId: '345',
|
|
24
|
+
Year: '2016',
|
|
25
|
+
Runtime: '115 min',
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: 'John Wick',
|
|
29
|
+
Year: '2014',
|
|
30
|
+
serverId: '456',
|
|
31
|
+
Runtime: '101 min',
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
label: 'The Notebook',
|
|
35
|
+
serverId: '567',
|
|
36
|
+
Year: '2004',
|
|
37
|
+
Runtime: '123 min',
|
|
38
|
+
},
|
|
39
|
+
];
|
|
40
|
+
|
|
41
|
+
export default () => {
|
|
42
|
+
const [id, setId] = React.useState('456');
|
|
43
|
+
const [value, setValue] = React.useState('');
|
|
44
|
+
const [moviesLists, setMoviesList] = React.useState([]);
|
|
45
|
+
const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
|
|
46
|
+
const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();
|
|
47
|
+
|
|
48
|
+
const model = useSelectModel({
|
|
49
|
+
items: moviesLists,
|
|
50
|
+
getTextValue: item => item.label,
|
|
51
|
+
getId: item => item.serverId,
|
|
52
|
+
initialSelectedIds: [id],
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
function loadItems() {
|
|
56
|
+
setLoadingStatus('loading');
|
|
57
|
+
loadingRef.current = setTimeout(() => {
|
|
58
|
+
setLoadingStatus('success');
|
|
59
|
+
setMoviesList(movieListItems);
|
|
60
|
+
}, 1500);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
useMount(() => {
|
|
64
|
+
return () => {
|
|
65
|
+
clearTimeout(loadingRef.current);
|
|
66
|
+
};
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<Flex flexDirection="column" maxWidth={300}>
|
|
71
|
+
<div id="foo">Foo Bar</div>
|
|
72
|
+
<Select model={model}>
|
|
73
|
+
<FormField label="Choose a Film">
|
|
74
|
+
<Select.Input
|
|
75
|
+
onChange={e => {
|
|
76
|
+
setId(e.target.value);
|
|
77
|
+
setValue(model.navigation.getItem(e.target.value, model).textValue);
|
|
78
|
+
}}
|
|
79
|
+
placeholder={loadingStatus}
|
|
80
|
+
/>
|
|
81
|
+
<Select.Popper>
|
|
82
|
+
<Select.Card>
|
|
83
|
+
<Select.List>
|
|
84
|
+
{item => {
|
|
85
|
+
return <Select.Item>{item.label}</Select.Item>;
|
|
86
|
+
}}
|
|
87
|
+
</Select.List>
|
|
88
|
+
</Select.Card>
|
|
89
|
+
</Select.Popper>
|
|
90
|
+
</FormField>
|
|
91
|
+
</Select>
|
|
92
|
+
<div data-testid="selected-id">Selected Id: {id}</div>
|
|
93
|
+
<div data-testid="selected-value">Selected value: {value}</div>
|
|
94
|
+
<PrimaryButton
|
|
95
|
+
onClick={() => {
|
|
96
|
+
loadItems();
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
99
|
+
Get Items
|
|
100
|
+
</PrimaryButton>
|
|
101
|
+
</Flex>
|
|
102
|
+
);
|
|
103
|
+
};
|
|
@@ -24,11 +24,7 @@ export default () => {
|
|
|
24
24
|
<Select.Input />
|
|
25
25
|
<Select.Popper>
|
|
26
26
|
<Select.Card>
|
|
27
|
-
{
|
|
28
|
-
<Select.List scrollMargin="10px">
|
|
29
|
-
{item => <Select.Item>{item}</Select.Item>}
|
|
30
|
-
</Select.List>
|
|
31
|
-
)}
|
|
27
|
+
<Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
|
|
32
28
|
</Select.Card>
|
|
33
29
|
</Select.Popper>
|
|
34
30
|
</FormField>
|
|
@@ -5,18 +5,17 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
|
|
|
5
5
|
import {BodyText} from '@workday/canvas-kit-react/text';
|
|
6
6
|
|
|
7
7
|
const options = [
|
|
8
|
-
'E-mail',
|
|
9
|
-
'Phone',
|
|
10
|
-
'Fax
|
|
11
|
-
'Mail',
|
|
12
|
-
'Mobile Phone',
|
|
13
|
-
'The Ontologically Anthropocentric Sensory Immersive Simulation',
|
|
8
|
+
{text: 'E-mail', id: 'email-1'},
|
|
9
|
+
{text: 'Phone', id: 'phone-2'},
|
|
10
|
+
{text: 'Fax', id: 'fax-3'},
|
|
11
|
+
{text: 'Mail', id: 'mail-4'},
|
|
12
|
+
{text: 'Mobile Phone', id: 'mobile-phone-5'},
|
|
14
13
|
];
|
|
15
14
|
|
|
16
15
|
export default () => {
|
|
17
16
|
const model = useSelectModel({
|
|
18
17
|
items: options,
|
|
19
|
-
|
|
18
|
+
initialSelectedIds: ['fax-3'],
|
|
20
19
|
});
|
|
21
20
|
|
|
22
21
|
return (
|
|
@@ -26,13 +25,7 @@ export default () => {
|
|
|
26
25
|
<Select.Input />
|
|
27
26
|
<Select.Popper>
|
|
28
27
|
<Select.Card>
|
|
29
|
-
<Select.List>
|
|
30
|
-
{item => (
|
|
31
|
-
<Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
|
|
32
|
-
{item}
|
|
33
|
-
</Select.Item>
|
|
34
|
-
)}
|
|
35
|
-
</Select.List>
|
|
28
|
+
<Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
|
|
36
29
|
</Select.Card>
|
|
37
30
|
</Select.Popper>
|
|
38
31
|
</FormField>
|
|
@@ -40,7 +33,7 @@ export default () => {
|
|
|
40
33
|
<BodyText size="small">Selected Value: {model.state.selectedIds[0]}</BodyText>
|
|
41
34
|
<SecondaryButton
|
|
42
35
|
onClick={() => {
|
|
43
|
-
model.events.select({id: '
|
|
36
|
+
model.events.select({id: 'phone-2'});
|
|
44
37
|
}}
|
|
45
38
|
>
|
|
46
39
|
Select Phone Item
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
3
|
+
import {Select} from '@workday/canvas-kit-react/select';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
|
|
6
|
+
const options = [
|
|
7
|
+
{
|
|
8
|
+
id: 'b310c757b2d341f99d40d76f4d563c5b',
|
|
9
|
+
descriptor: 'Arabic',
|
|
10
|
+
languageCode: 'ar',
|
|
11
|
+
label: 'Arabic',
|
|
12
|
+
nativeLanguageName: 'العربية',
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
id: 'a675a6b6e22d100017d7fe2a784d1255',
|
|
16
|
+
descriptor: 'Bulgarian (Bulgaria)',
|
|
17
|
+
languageCode: 'bg_BG',
|
|
18
|
+
label: 'Bulgarian (Bulgaria)',
|
|
19
|
+
nativeLanguageName: 'български (Република България)',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
id: 'da594226446c11de98360015c5e6daf6',
|
|
23
|
+
descriptor: 'English (United States)',
|
|
24
|
+
languageCode: 'en_US',
|
|
25
|
+
label: 'English (United States)',
|
|
26
|
+
nativeLanguageName: 'English',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
export default () => {
|
|
31
|
+
const [value, setValue] = React.useState('English (United States)');
|
|
32
|
+
const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');
|
|
33
|
+
|
|
34
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
35
|
+
setId(event.target.value);
|
|
36
|
+
setValue(options.find(item => item.id === event.target.value).label);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Flex flexDirection="column">
|
|
41
|
+
<Select
|
|
42
|
+
items={options}
|
|
43
|
+
initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
|
|
44
|
+
getId={item => item.id}
|
|
45
|
+
getTextValue={item => item.label}
|
|
46
|
+
>
|
|
47
|
+
<FormField label="Contact">
|
|
48
|
+
<Select.Input onChange={e => handleChange(e)} />
|
|
49
|
+
<Select.Popper>
|
|
50
|
+
<Select.Card>
|
|
51
|
+
<Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
|
|
52
|
+
</Select.Card>
|
|
53
|
+
</Select.Popper>
|
|
54
|
+
</FormField>
|
|
55
|
+
</Select>
|
|
56
|
+
<p>Id: {id}</p>
|
|
57
|
+
<p>Value: {value}</p>
|
|
58
|
+
</Flex>
|
|
59
|
+
);
|
|
60
|
+
};
|
|
@@ -24,9 +24,7 @@ export default () => {
|
|
|
24
24
|
<Select.Input />
|
|
25
25
|
<Select.Popper>
|
|
26
26
|
<Select.Card>
|
|
27
|
-
{
|
|
28
|
-
<Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
|
|
29
|
-
)}
|
|
27
|
+
<Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
|
|
30
28
|
</Select.Card>
|
|
31
29
|
</Select.Popper>
|
|
32
30
|
</FormField>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
3
|
+
import {Select} from '@workday/canvas-kit-react/select';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
|
|
6
|
+
const options = [
|
|
7
|
+
'E-mail',
|
|
8
|
+
'Phone',
|
|
9
|
+
'Fax',
|
|
10
|
+
'Mail',
|
|
11
|
+
'Mobile Phone',
|
|
12
|
+
'The Ontologically Anthropocentric Sensory Immersive Simulation',
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
export default () => {
|
|
16
|
+
const [value, setValue] = React.useState('');
|
|
17
|
+
|
|
18
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
19
|
+
setValue(event.target.value);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<Flex flexDirection="column">
|
|
24
|
+
<Select items={options}>
|
|
25
|
+
<FormField label="Contact">
|
|
26
|
+
<Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
|
|
27
|
+
<Select.Popper>
|
|
28
|
+
<Select.Card>
|
|
29
|
+
<Select.List>
|
|
30
|
+
{item => {
|
|
31
|
+
return <Select.Item>{item}</Select.Item>;
|
|
32
|
+
}}
|
|
33
|
+
</Select.List>
|
|
34
|
+
</Select.Card>
|
|
35
|
+
</Select.Popper>
|
|
36
|
+
</FormField>
|
|
37
|
+
</Select>
|
|
38
|
+
Selected Value: {value}
|
|
39
|
+
</Flex>
|
|
40
|
+
);
|
|
41
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "10.3.
|
|
3
|
+
"version": "10.3.5",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^10.3.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^10.3.
|
|
49
|
-
"@workday/canvas-kit-react": "^10.3.
|
|
50
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^10.3.5",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^10.3.5",
|
|
49
|
+
"@workday/canvas-kit-react": "^10.3.5",
|
|
50
|
+
"@workday/canvas-kit-styling": "^10.3.5",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
53
53
|
"markdown-to-jsx": "^6.10.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"mkdirp": "^1.0.3",
|
|
60
60
|
"typescript": "4.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "ff2e0a2ef7bfedfa90006e0195ac8fcc1039b39c"
|
|
63
63
|
}
|