@seeqdev/qomponents 0.0.156 → 0.0.158

package/dist/example/src/ComplexSelectExample.tsx

@@ -1,81 +1,81 @@
-import React from 'react';
-import { Icon, Select } from '@seeqdev/qomponents';
-
-export interface SelectOption {
-  id: string;
-  label: string;
-  color: string;
-  asset: string;
-  type: 'SCALAR' | 'STRING' | 'NUMERIC';
-}
-
-const options: SelectOption[] = [
-  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
-  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
-  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
-];
-
-interface ComplexSelectExampleProps {
-  onChange: (selectedOption: SelectOption) => void;
-  value: SelectOption | undefined;
-}
-
-function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
-  const getIcon = (type: string) => {
-    switch (type) {
-      case 'STRING':
-        return 'fa fa-font';
-      case 'SCALAR':
-        return 'fc-scalar';
-      default:
-        return 'fc-series';
-    }
-  };
-  /**
-   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
-   * to style the select option display.
-   *
-   * You can use the same function to format the selected value or use a different one (sometimes having a separate
-   * function is helpful if you want to limit the space that is taken up by the selected option).
-   *
-   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
-   * as how to display the properties of the select option
-   */
-  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
-    return (
-      <div className="selectOptionWrapperDiv">
-        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
-        <div className="selectOptionDiv">
-          <div className="selectOption">
-            <strong>{optionValue.label}</strong>
-          </div>
-          <div className="selectOptionSubText">{optionValue.asset}</div>
-        </div>
-      </div>
-    );
-  };
-  const getOptionValue = (option: SelectOption) => {
-    return option.id;
-  };
-
-  return (
-    // use the getOptionLabel function to provide a custom render function that determines how the select options
-    // are displayed
-    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
-    // option is displayed
-    <Select
-      placeholder="formatted select options"
-      extraClassNames="formElementWidth"
-      options={options}
-      value={value}
-      getOptionLabel={getOptionLabel}
-      getOptionValue={getOptionValue}
-      getSelectedValueLabel={getOptionLabel}
-      onChange={(selectedOption: SelectOption) => {
-        onChange(selectedOption);
-      }}
-    />
-  );
-}
-
-export default ComplexSelectExample;
+import React from 'react';
+import { Icon, Select } from '@seeqdev/qomponents';
+
+export interface SelectOption {
+  id: string;
+  label: string;
+  color: string;
+  asset: string;
+  type: 'SCALAR' | 'STRING' | 'NUMERIC';
+}
+
+const options: SelectOption[] = [
+  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
+  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
+  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
+];
+
+interface ComplexSelectExampleProps {
+  onChange: (selectedOption: SelectOption) => void;
+  value: SelectOption | undefined;
+}
+
+function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'STRING':
+        return 'fa fa-font';
+      case 'SCALAR':
+        return 'fc-scalar';
+      default:
+        return 'fc-series';
+    }
+  };
+  /**
+   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
+   * to style the select option display.
+   *
+   * You can use the same function to format the selected value or use a different one (sometimes having a separate
+   * function is helpful if you want to limit the space that is taken up by the selected option).
+   *
+   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
+   * as how to display the properties of the select option
+   */
+  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
+    return (
+      <div className="selectOptionWrapperDiv">
+        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
+        <div className="selectOptionDiv">
+          <div className="selectOption">
+            <strong>{optionValue.label}</strong>
+          </div>
+          <div className="selectOptionSubText">{optionValue.asset}</div>
+        </div>
+      </div>
+    );
+  };
+  const getOptionValue = (option: SelectOption) => {
+    return option.id;
+  };
+
+  return (
+    // use the getOptionLabel function to provide a custom render function that determines how the select options
+    // are displayed
+    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
+    // option is displayed
+    <Select
+      placeholder="formatted select options"
+      extraClassNames="formElementWidth"
+      options={options}
+      value={value}
+      getOptionLabel={getOptionLabel}
+      getOptionValue={getOptionValue}
+      getSelectedValueLabel={getOptionLabel}
+      onChange={(selectedOption: SelectOption) => {
+        onChange(selectedOption);
+      }}
+    />
+  );
+}
+
+export default ComplexSelectExample;