@pareto-engineering/design-system 2.0.0-alpha.48 → 2.0.0-alpha.50

package/src/ui/f/fields/QuerySelect/QuerySelect.jsx

@@ -0,0 +1,200 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useEffect } from 'react'
+
+import { useRelayEnvironment, fetchQuery } from 'react-relay'
+
+import { useField } from 'formik'
+
+import PropTypes from 'prop-types'
+
+// Local Definitions
+
+import { SelectInput } from 'ui/f'
+
+/**
+ * This is the component description.
+ */
+const QuerySelect = ({
+  id,
+  className:userClassName,
+  style,
+  name,
+  label,
+  query,
+  variables,
+  optionsKeyMap,
+  description,
+  disabled,
+  color,
+  loadingOption,
+  defaultOption,
+  // ...otherProps
+}) => {
+  const [, , helpers] = useField(name)
+
+  const { setError } = helpers
+
+  const environment = useRelayEnvironment()
+
+  const [isFetching, setIsFetching] = useState(false)
+
+  const [options, setOptions] = useState([])
+
+  const { graphql, accessor } = query
+
+  const getOptions = () => {
+    if (isFetching) return
+
+    fetchQuery(
+      environment,
+      graphql,
+      variables,
+    )
+      .subscribe({
+        start:() => {
+          setIsFetching(true)
+          setOptions([loadingOption])
+        },
+        complete:() => {
+          setIsFetching(false)
+        },
+        error:(fetchError) => {
+          setIsFetching(false)
+          if (setError)setError(fetchError.message)
+        },
+        next:(data) => {
+          setOptions([
+            defaultOption,
+            ...data[accessor].edges.map(({ node }) => ({
+              value:node[optionsKeyMap.value],
+              label:optionsKeyMap.getLabel(node),
+            })),
+          ])
+        },
+      })
+  }
+
+  useEffect(() => {
+    getOptions()
+  }, [variables])
+
+  return (
+    <SelectInput
+      id={id}
+      className={userClassName}
+      style={style}
+      name={name}
+      label={label}
+      color={color}
+      description={description}
+      disabled={isFetching || disabled}
+      options={options}
+      isLoading={isFetching}
+    />
+  )
+}
+
+QuerySelect.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The name of the custom select input
+   */
+  name:PropTypes.string,
+
+  /**
+   * The label of the custom select input
+   */
+  label:PropTypes.string,
+
+  /**
+   * The custom select input description
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The base color of the custom select input
+   */
+  color:PropTypes.string,
+
+  /**
+   * The graphql query to fetch the options and the accessor to destructure the results from
+   */
+  query:PropTypes.shape({
+    accessor:PropTypes.string,
+    graphql :PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]).isRequired,
+  }),
+
+  /**
+   *  The variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  variables:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The select option keys to be used to map the data to the select options.
+   * i.e `{ value: 'id', label: 'name' }`
+   */
+  optionsKeyMap:PropTypes.shape({
+    value   :PropTypes.string.isRequired,
+    getLabel:PropTypes.func.isRequired,
+  }).isRequired,
+
+  /**
+   * The default select option for the query select
+   */
+  defaultOption:PropTypes.shape({
+    value   :PropTypes.string.isRequired,
+    label   :PropTypes.string.isRequired,
+    disabled:PropTypes.bool.isRequired,
+  }),
+
+  /**
+   * The option to dipslayed when the select options are being fetched
+   */
+  loadingOption:PropTypes.shape({
+    value   :PropTypes.string.isRequired,
+    label   :PropTypes.string.isRequired,
+    disabled:PropTypes.bool.isRequired,
+  }),
+}
+
+QuerySelect.defaultProps = {
+  disabled     :false,
+  color        :'background2',
+  defaultOption:{
+    value   :'',
+    label   :'Select an option',
+    disabled:true,
+  },
+  loadingOption:{
+    value   :'',
+    label   :'Fetching Options',
+    disabled:true,
+  },
+}
+
+export default QuerySelect

package/src/ui/f/fields/QuerySelect/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as QuerySelect } from './QuerySelect'

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -9,6 +9,8 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem'
 
+import { LoadingCircle } from 'ui/a'
+
 import { FormLabel, FormDescription } from '../../common'
 
 // Local Definitions
@@ -31,6 +33,7 @@ const SelectInput = ({
   validate,
   description,
   disabled,
+  isLoading,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -56,8 +59,9 @@ const SelectInput = ({
       // {...otherProps}
     >
       <FormLabel name={name}>{label}</FormLabel>
-      <select className="input" {...field} value={field.value || ''} id={name} disabled={disabled}>
-        {
+      <div className="select-wrapper">
+        <select className="input" {...field} value={field.value || ''} id={name} disabled={disabled}>
+          {
         options.map((option) => {
           // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
           const newOption = typeof option === 'string' ? { value: option, label: option } : option
@@ -73,7 +77,11 @@ const SelectInput = ({
           )
         })
       }
-      </select>
+        </select>
+        {isLoading && (
+        <LoadingCircle className="x-main2" />
+        )}
+      </div>
       {(description || (meta.touched && meta.error))
       && (
       <FormDescription isError={!!meta.error} className="v50 mt-v s-1">
@@ -142,6 +150,11 @@ SelectInput.propTypes = {
    * The color of the select input
    */
   color:PropTypes.string,
+
+  /*
+  * Whether the query that is fetching the select options is still in flight
+  */
+  isLoading:PropTypes.bool,
 }
 
 SelectInput.defaultProps = {

package/src/ui/f/fields/SelectInput/styles.scss

@@ -16,22 +16,35 @@ $default-margin: 1em;
     margin-bottom: $default-margin
   }
 
-  .input {
-    border: var(--theme-border-style) var(--dark-y);
-    background: var(--light-y);
-    color: var(--on-y);
-    padding: $default-padding;
-
-    &:not(:disabled):hover {
-      border: var(--theme-border-style) var(--light-background4);
+  .select-wrapper {
+    position: relative;
+
+    >.#{bem.$base}.loading-circle {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
-    &:disabled {
-      background-color: var(--dark-y);
-    }
-
-    &:focus {
-      background: var(--y);
+    >.input {
+      width: 100%;
+      border: var(--theme-border-style) var(--dark-y);
+      background: var(--light-y);
+      color: var(--on-y);
+      padding: $default-padding;
+
+      &:not(:disabled):hover {
+        border: var(--theme-border-style) var(--light-background4);
+      }
+
+      &:disabled {
+        background-color: var(--dark-y);
+        appearance: none;
+      }
+
+      &:focus {
+        background: var(--y);
+      }
     }
   }
 }

package/src/ui/f/fields/index.js

@@ -4,3 +4,4 @@ export { ChoicesInput } from './ChoicesInput'
 export { TextareaInput } from './TextareaInput'
 export { RatingsInput } from './RatingsInput'
 export { QueryCombobox } from './QueryCombobox'
+export { QuerySelect } from './QuerySelect'