feat(docs): select showcases add

src/framework/ui/select/select.component.tsx

@@ -87,7 +87,9 @@ interface State {
 }
 
 /**
- * Styled `Select` component.
+ * Styled `Select` component. By default, the MultiSelect compares the items by reference.
+ * To specify a field from the data object which will be used for the comparison,
+ * implement the `keyExtractor` property.
  *
  * @extends React.Component
  *
@@ -141,6 +143,14 @@ interface State {
  *
  * @overview-example SelectWithGroups
  *
+ * @overview-example SelectPreselectedInline
+ *
+ * @overview-example SelectPreselectedReference
+ *
+ * @overview-example SelectMultiPreselectedInline
+ *
+ * @overview-example SelectMultiPreselectedReference
+ *
  * @example SelectCustomIcon
  *
  * @example SelectInlineStyling

src/playground/src/ui/screen/showcases/select/index.ts

@@ -4,3 +4,7 @@ export { SelectWithGroupsShowcase } from './selectWithGroups.component';
 export { SelectCustomIconShowcase } from './selectCustomIcon.component';
 export { SelectStatusShowcase } from './selectStatus.component';
 export { SelectInlineStylingShowcase } from './selectInlineStyling.component';
+export { SelectPreselectedInlineShowcase } from './selectPreselectedInline.component';
+export { SelectPreselectedReferenceShowcase } from './selectPreselectedReference.component';
+export { SelectMultiPreselectedInlineShowcase } from './selectMultiPreselectedInline.component';
+export { SelectMultiPreselectedReferenceShowcase } from './selectMultiPreselectedReference.component';

src/playground/src/ui/screen/showcases/select/selectMultiPreselectedInline.component.tsx

@@ -0,0 +1,56 @@
+/**
+ * IMPORTANT: Do not forget to set keyExtractor property in such case!
+ */
+
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Layout,
+  Select,
+} from 'react-native-ui-kitten';
+
+export class SelectMultiPreselectedInlineShowcase extends React.Component {
+
+  data = [
+    { text: 'Option 1' },
+    { text: 'Option 2' },
+    { text: 'Option 3' },
+  ];
+
+  state = {
+    selectedOption: [
+      { text: 'Option 2' },
+      { text: 'Option 3' },
+    ],
+  };
+
+  onSelect = (selectedOption) => {
+    this.setState({ selectedOption });
+  };
+
+  extractKey = (item) => {
+    return item.text;
+  };
+
+  render() {
+    return (
+      <Layout style={styles.container}>
+        <Select
+          data={this.data}
+          multiSelect={true}
+          selectedOption={this.state.selectedOption}
+          keyExtractor={this.extractKey}
+          onSelect={this.onSelect}
+        />
+      </Layout>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 230,
+    padding: 16,
+  },
+});
+