@performant-software/semantic-components 1.0.19 → 1.0.20-beta.0

package/types/components/UserDefinedFieldOptions.js.flow

@@ -1,112 +0,0 @@
-// @flow
-
-import React, {
-  useCallback,
-  useEffect,
-  useState,
-  type ComponentType
-} from 'react';
-import { Button, Input, Label } from 'semantic-ui-react';
-import _ from 'underscore';
-import './UserDefinedFieldOptions.css';
-
-type Props = {
-  options: Array<string>,
-  onChange: (options: Array<string>) => void
-};
-
-const UserDefinedFieldOptions: ComponentType<any> = (props: Props) => {
-  const [options, setOptions] = useState(_.map(props.options, (option) => ({ value: option })));
-
-  /**
-   * Adds a new option to the list.
-   *
-   * @type {(function(): void)|*}
-   */
-  const onAddOption = useCallback(() => {
-    setOptions((prevOptions) => [...prevOptions, { new: true }]);
-  }, []);
-
-  /**
-   * Deletes the option at the passed index from the list.
-   *
-   * @type {(function(*): void)|*}
-   */
-  const onDeleteOption = useCallback((findIndex) => {
-    setOptions((prevOptions) => _.filter(prevOptions, (option, index) => index !== findIndex));
-  }, []);
-
-  /**
-   * Removes the "new" indicator from the option at the passed index.
-   *
-   * @type {(function(*): void)|*}
-   */
-  const onSaveOption = useCallback((findIndex) => {
-    setOptions((prevOptions) => _.map(
-      prevOptions,
-      (option, index) => (findIndex !== index ? option : ({ ...option, new: false }))
-    ));
-  }, [options]);
-
-  /**
-   * Updates the value of the option at the passed index.
-   *
-   * @type {(function(*, *, {value: *}): void)|*}
-   */
-  const onUpdateOption = useCallback((findIndex, e, { value }) => {
-    setOptions((prevOptions) => _.map(
-      prevOptions,
-      (option, index) => (index !== findIndex ? option : ({ ...option, value }))
-    ));
-  }, []);
-
-  /**
-   * Calls the onChange prop when the list of options changes.
-   */
-  useEffect(() => {
-    const savedOptions = _.filter(options, (option) => !option.new);
-    props.onChange(_.pluck(savedOptions, 'value'));
-  }, [options]);
-
-  return (
-    <div
-      className='user-defined-field-options'
-    >
-      <Button
-        basic
-        icon='plus'
-        onClick={onAddOption}
-        type='button'
-      />
-      { _.map(options, (option, index) => (
-        <>
-          { option.new && (
-            <Label>
-              <Input
-                autoFocus
-                onChange={onUpdateOption.bind(this, index)}
-                value={option.value}
-              />
-              <Button
-                basic
-                color='green'
-                icon='checkmark'
-                onClick={onSaveOption.bind(this, index)}
-                type='button'
-                size='tiny'
-              />
-            </Label>
-          )}
-          { !option.new && (
-            <Label
-              content={option.value}
-              onRemove={onDeleteOption.bind(this, index)}
-            />
-          )}
-        </>
-      ))}
-    </div>
-  );
-};
-
-export default UserDefinedFieldOptions;

package/types/components/UserDefinedFieldsEmbeddedList.js.flow

@@ -1,45 +0,0 @@
-// @flow
-
-import React from 'react';
-import i18n from '../i18n/i18n';
-import BooleanIcon from './BooleanIcon';
-import EmbeddedList from './EmbeddedList';
-import UserDefinedFieldModal from './UserDefinedFieldModal';
-
-type Props = {
-  items: Array<any>,
-  onDelete: (item: any) => Promise<any>,
-  onSave: (item: any) => Promise<any>
-};
-
-const UserDefinedFieldsEmbeddedList = (props: Props) => (
-  <EmbeddedList
-    actions={[{
-      name: 'edit'
-    }, {
-      name: 'delete'
-    }]}
-    columns={[{
-      name: 'table_name',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.table')
-    }, {
-      name: 'column_name',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.name')
-    }, {
-      name: 'data_type',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.dataType')
-    }, {
-      name: 'required',
-      label: i18n.t('UserDefinedFieldsEmbeddedList.columns.required'),
-      render: (udf) => <BooleanIcon value={udf.required} />
-    }]}
-    items={props.items}
-    modal={{
-      component: UserDefinedFieldModal
-    }}
-    onDelete={props.onDelete}
-    onSave={props.onSave}
-  />
-);
-
-export default UserDefinedFieldsEmbeddedList;

package/types/components/UserDefinedFieldsForm.js.flow

@@ -1,209 +0,0 @@
-// @flow
-
-import { RichTextArea, UserDefinedFieldsService } from '@performant-software/shared-components';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type ComponentType
-} from 'react';
-import { Form } from 'semantic-ui-react';
-import _ from 'underscore';
-import DatePicker from './DatePicker';
-
-type Props = {
-  defineableId?: number,
-  defineableType?: string,
-  isError: (key: string) => boolean,
-  item: any,
-  onChange: (obj: any) => void,
-  onClearValidationError: (...keys: Array<string>) => void
-};
-
-const DataTypes = {
-  boolean: 'Boolean',
-  date: 'Date',
-  number: 'Number',
-  richText: 'RichText',
-  select: 'Select',
-  string: 'String',
-  text: 'Text'
-};
-
-const UserDefinedFieldsForm: ComponentType<any> = (props: Props) => {
-  const [fields, setFields] = useState([]);
-
-  /**
-   * Sets the parsed value by parsing the JSON stored in the "user_defined" prop of the item.
-   *
-   * @type {unknown}
-   */
-  const parsedValue = useMemo(() => {
-    let value = {};
-
-    if (_.isString(props.item.user_defined)) {
-      value = JSON.parse(props.item.user_defined);
-    }
-
-    return value;
-  }, [props.item.user_defined]);
-
-  /**
-   * Returns the key for the passed field.
-   *
-   * @type {function(*): string}
-   */
-  const getFieldKey = useCallback((field) => `user_defined[${field.column_name}]`, []);
-
-  /**
-   * Returns true if an error exists on the state for the passed field.
-   *
-   * @type {function(*): *}
-   */
-  const isError = useCallback((field) => props.isError(getFieldKey(field)), [getFieldKey, props.isError]);
-
-  /**
-   * Changes the value for the passed item.
-   *
-   * @type {(function(*, *): void)|*}
-   */
-  const onChange = useCallback((field, value) => {
-    props.onChange(JSON.stringify({ ...parsedValue, [field.column_name]: value }));
-
-    // Clear the validation error if one exists
-    if (props.onClearValidationError) {
-      props.onClearValidationError(getFieldKey(field));
-    }
-  }, [getFieldKey, parsedValue, props.onChange, props.onClearValidationError]);
-
-  /**
-   * Renders the passed item.
-   *
-   * @type {function(*): *}
-   */
-  const renderItem = useCallback((field) => {
-    let rendered;
-
-    const fieldValue = parsedValue && parsedValue[field.column_name];
-
-    if (field.data_type === DataTypes.string) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          label={field.column_name}
-          required={field.required}
-          onChange={(e, { value }) => onChange(field, value)}
-          value={fieldValue}
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.number) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          label={field.column_name}
-          required={field.required}
-          onChange={(e, { value }) => onChange(field, value)}
-          value={fieldValue}
-          type='number'
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.select) {
-      rendered = (
-        <Form.Dropdown
-          clearable
-          error={isError(field)}
-          label={field.column_name}
-          multiple={field.allow_multiple}
-          required={field.required}
-          options={_.map(field.options, (option) => ({ key: option, value: option, text: option }))}
-          onChange={(e, { value }) => onChange(field, value)}
-          selectOnBlur={false}
-          selection
-          value={fieldValue}
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.text) {
-      rendered = (
-        <Form.TextArea
-          error={isError(field)}
-          label={field.column_name}
-          required={field.required}
-          onChange={(e, { value }) => onChange(field, value)}
-          value={fieldValue}
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.date) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          label={field.column_name}
-          required={field.required}
-        >
-          <DatePicker
-            onChange={(date) => onChange(field, date && date.toString())}
-            value={fieldValue && new Date(fieldValue)}
-          />
-        </Form.Input>
-      );
-    }
-
-    if (field.data_type === DataTypes.boolean) {
-      rendered = (
-        <Form.Checkbox
-          checked={!!fieldValue}
-          error={isError(field)}
-          label={field.column_name}
-          onChange={(e, { checked }) => onChange(field, checked)}
-        />
-      );
-    }
-
-    if (field.data_type === DataTypes.richText) {
-      rendered = (
-        <Form.Input
-          error={isError(field)}
-          label={field.column_name}
-          required={field.required}
-        >
-          <RichTextArea
-            onChange={(value) => onChange(field, value)}
-            value={fieldValue}
-          />
-        </Form.Input>
-      );
-    }
-
-    return rendered;
-  }, [parsedValue, isError, onChange]);
-
-  /**
-   * Fetches the user defined fields when the component mounts.
-   */
-  useEffect(() => {
-    const params = {
-      defineable_id: props.defineableId,
-      defineable_type: props.defineableType
-    };
-
-    UserDefinedFieldsService
-      .fetchAll(params)
-      .then(({ data }) => setFields(data.user_defined_fields));
-  }, []);
-
-  return (
-    <>
-      { _.map(fields, renderItem.bind(this)) }
-    </>
-  );
-};
-
-export default UserDefinedFieldsForm;

package/types/components/UserDefinedFieldsList.js.flow

@@ -1,41 +0,0 @@
-// @flow
-
-import { UserDefinedFieldsService } from '@performant-software/shared-components';
-import React, { type ComponentType } from 'react';
-import i18n from '../i18n/i18n';
-import BooleanIcon from './BooleanIcon';
-import ListTable from './ListTable';
-import UserDefinedFieldModal from './UserDefinedFieldModal';
-
-const UserDefinedFieldsList: ComponentType<any> = () => (
-  <ListTable
-    actions={[{
-      name: 'edit'
-    }, {
-      name: 'delete'
-    }]}
-    columns={[{
-      name: 'table_name',
-      label: i18n.t('UserDefinedFieldsList.columns.table')
-    }, {
-      name: 'column_name',
-      label: i18n.t('UserDefinedFieldsList.columns.name')
-    }, {
-      name: 'data_type',
-      label: i18n.t('UserDefinedFieldsList.columns.dataType')
-    }, {
-      name: 'required',
-      label: i18n.t('UserDefinedFieldsList.columns.required'),
-      render: (udf) => <BooleanIcon value={udf.required} />
-    }]}
-    collectionName='user_defined_fields'
-    modal={{
-      component: UserDefinedFieldModal
-    }}
-    onLoad={(params) => UserDefinedFieldsService.fetchAll(params)}
-    onSave={(udf) => UserDefinedFieldsService.save(udf)}
-    onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
-  />
-);
-
-export default UserDefinedFieldsList;

package/types/css/theme.js.flow

@@ -1,5 +0,0 @@
-// @flow
-
-import 'semantic-ui-less/semantic.less';
-
-export default {};

package/types/hooks/Imageable.js.flow

@@ -1,54 +0,0 @@
-// @flow
-
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  type ComponentType
-} from 'react';
-
-type Imageable = {
-  contextRef: any,
-  imageLoaded: boolean,
-  onImageLoaded: () => void,
-  onImageUnloaded: () => void
-};
-
-const useImageable = (WrappedComponent: ComponentType<any>) => (props: any) => {
-  const [loaded, setLoaded] = useState(false);
-  const imageRef = useRef(null);
-
-  /**
-   * Since images may be cached, we cannot always rely on the img onLoad event. Here we'll use a ref to check to see
-   * if the image has completed loading.
-   */
-  useEffect(() => {
-    const imageInstance = imageRef.current;
-
-    if (imageInstance && imageInstance.firstChild && imageInstance.firstChild.firstChild) {
-      const image = imageInstance.firstChild.firstChild;
-
-      if (image && image.complete) {
-        setLoaded(true);
-      }
-    }
-  }, []);
-
-  return (
-    <WrappedComponent
-      {...props}
-      contextRef={imageRef}
-      imageLoaded={loaded}
-      onImageLoaded={() => setLoaded(true)}
-      onImageUnloaded={() => setLoaded(false)}
-    />
-  );
-};
-
-export {
-  useImageable
-};
-
-export type {
-  Imageable
-};

package/types/hooks/InstantSearch.js.flow

@@ -1,95 +0,0 @@
-// @flow
-
-import { useConnector } from 'react-instantsearch-hooks-web';
-import connectRange from 'instantsearch.js/es/connectors/range/connectRange';
-import connectStats from 'instantsearch.js/es/connectors/stats/connectStats';
-
-/**
- * Utility function to create the range slider hook.
- *
- * @param props
- */
-export const useRangeSlider = (props) => useConnector(connectRange, props);
-
-/**
- * Utility function to create the stats hook.
- *
- * @param props
- */
-export const useStats = (props) => useConnector(connectStats, props);
-
-export type ClearRefinementsProps = {
-  useClearRefinements: (props: any) => ({ canRefine: boolean, refine: () => void })
-};
-
-export type CurrentRefinementsProps = {
-  useCurrentRefinements: (props: any) => ({ items: Array<any> })
-};
-
-export type HitsPerPageProps = {
-  useHitsPerPage: (props: any) => ({
-    items: Array<{ value: number, label: string, default: boolean}>,
-    refine: (value: number) => void
-  })
-};
-
-export type HitsProps = {
-  useHits: (props: any) => ({
-    hits: Array<any>
-  })
-};
-
-export type PaginationProps = {
-  usePagination: (props: any) => ({
-    currentRefinement: number,
-    nbPages: number,
-    refine: (value: number) => void
-  })
-};
-
-export type RangeSliderProps = {
-  useRangeSlider: (props: any) => ({
-    start: Array<number>,
-    range: {
-      min: number,
-      max: number
-    },
-    refine: ({ min: number, max: number }) => void
-  })
-};
-
-export type RefinementListProps = {
-  useRefinementList: (props: any) => ({
-    items: Array<any>,
-    refine: (value: any) => void,
-    canToggleShowMore: boolean,
-    isShowingMore: boolean,
-    toggleShowMore: () => void
-  })
-};
-
-export type SearchBoxProps = {
-  useSearchBox: (props: any) => ({
-    query: string,
-    refine: (value: string) => void,
-    clear: () => void,
-    isSearchStalled: boolean
-  })
-};
-
-export type StatsProps = {
-  useStats: (props: any) => ({
-    nbHits: number,
-    processingTimeMS: number
-  })
-};
-
-export type ToggleRefinementProps = {
-  useToggleRefinement: (props: any) => ({
-    value: {
-      isRefined: boolean,
-      count: number
-    },
-    refine: (value: boolean) => void
-  })
-};