fix(CFormSelect): add missing options property

Author: mrholek

packages/coreui-react/src/components/form/CFormSelect.tsx

@@ -2,6 +2,11 @@ import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+type Option = {
+  disabled?: boolean
+  label?: string
+  value?: string
+}
 export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
@@ -19,6 +24,13 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
    * Method called immediately after the `value` prop changes.
    */
   onChange?: ChangeEventHandler<HTMLSelectElement>
+  /**
+   * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+   * Examples:
+   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
+   * - `options={['js', 'html']}`
+   */
+  options?: Option[] | string[]
   /**
    * Size the component small or large.
    */
@@ -36,7 +48,7 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
 }
 
 export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
-  ({ children, className, htmlSize, invalid, size, valid, ...rest }, ref) => {
+  ({ children, className, htmlSize, invalid, options, size, valid, ...rest }, ref) => {
     const _className = classNames(
       'form-select',
       {
@@ -48,7 +60,20 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
     )
     return (
       <select className={_className} size={htmlSize} {...rest} ref={ref}>
-        {children}
+        {options
+          ? options.map((option, index) => {
+              return (
+                <option
+                  {...(typeof option === 'object' &&
+                    option.disabled && { disabled: option.disabled })}
+                  {...(typeof option === 'object' && option.value && { value: option.value })}
+                  key={index}
+                >
+                  {typeof option === 'string' ? option : option.label}
+                </option>
+              )
+            })
+          : children}
       </select>
     )
   },
@@ -59,6 +84,7 @@ CFormSelect.propTypes = {
   className: PropTypes.string,
   htmlSize: PropTypes.number,
   invalid: PropTypes.bool,
+  options: PropTypes.array,
   size: PropTypes.oneOf(['sm', 'lg']),
   valid: PropTypes.bool,
 }

packages/docs/content/4.0/api/CFormSelect.api.mdx

@@ -11,6 +11,7 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
 | **htmlSize** | Specifies the number of visible options in a drop-down list. | `number` | - |
 | **invalid** | Set component validation state to invalid. | `boolean` | - |
 | **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler<HTMLSelectElement>` | - |
+| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`.<br/>Examples:<br/>- `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`<br/>- `options={['js', 'html']}` | `Option[]` \| `string[]` | - |
 | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
 | **valid** | Set component validation state to valid. | `boolean` | - |
 | **value** | The `value` attribute of component.<br/>@controllable onChange | `string` \| `number` \| `string[]` | - |

packages/docs/content/4.0/forms/select.mdx

@@ -20,20 +20,34 @@ import {
 ## Default
 
 <Example>
-  <CFormSelect aria-label="Default select example">
-    <option>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-  </CFormSelect>
+  <CFormSelect 
+    aria-label="Default select example"
+    options={[
+      'Open this select menu',
+      { label: 'One', value: '1' },
+      { label: 'Two', value: '2' },
+      { label: 'Three', value: '3', disabled: true }
+    ]}
+  />
 </Example>
 
 ```jsx
+<CFormSelect 
+  aria-label="Default select example"
+  options={[
+    'Open this select menu',
+    { label: 'One', value: '1' },
+    { label: 'Two', value: '2' },
+    { label: 'Three', value: '3', disabled: true }
+  ]}
+/>
+
+// You can also add options manually
 <CFormSelect aria-label="Default select example">
   <option>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
-  <option value="3">Three</option>
+  <option value="3" disabled>Three</option>
 </CFormSelect>
 ```