CDC #18 - Media

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.0.23",
-    "@performant-software/shared-components": "^1.0.23",
+    "@performant-software/semantic-components": "^1.0.24",
+    "@performant-software/shared-components": "^1.0.24",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.23",
+    "@performant-software/shared-components": "^1.0.24",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

packages/semantic-ui/src/components/EmbeddedList.js

@@ -271,3 +271,7 @@ export {
   SORT_ASCENDING,
   SORT_DESCENDING
 };
+
+export type {
+  Props
+};

packages/semantic-ui/src/components/FileUploadModal.js

@@ -48,6 +48,11 @@ type Props = {
    */
   onClose: () => void,
 
+  /**
+   * Callback fired when the upload has completed.
+   */
+  onComplete: () => void,
+
   /**
    * Callback fired when the save button is clicked. See <code>strategy</code> prop.
    */
@@ -151,6 +156,10 @@ const FileUploadModal: ComponentType<any> = (props: Props) => {
   const onComplete = useCallback(() => {
     setUploading(false);
 
+    if (props.onComplete) {
+      props.onComplete();
+    }
+
     if (props.closeOnComplete) {
       props.onClose();
     }

packages/semantic-ui/src/components/ListTable.js

@@ -131,3 +131,7 @@ ListTable.defaultProps = {
 };
 
 export default ListTable;
+
+export type {
+  Props
+};

packages/semantic-ui/src/index.js

@@ -109,8 +109,10 @@ export { default as BatchEdit } from './hooks/BatchEdit';
 
 // Types
 export type { EditPageProps } from './components/EditPage';
+export type { Props as EmbeddedListProps } from './components/EmbeddedList';
 export type { FileUploadProps } from './components/FileUploadModal';
 export type { Props as ListProps } from './components/List';
+export type { Props as ListTableProps } from './components/ListTable';
 export type { BatchEditProps } from './hooks/BatchEdit';
 
 // Constants

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./build/index.js",

packages/shared/src/utils/Form.js

@@ -13,6 +13,11 @@ import StringUtils from './String';
  * @param attribute
  */
 const setAttribute = (formData, prefix, item, attribute) => {
+  // Return if the attribute doesn't exist on the passed item
+  if (!_.has(item, attribute)) {
+    return;
+  }
+
   const value = item[attribute];
 
   if (_.isArray(value)) {

packages/storybook/src/user-defined-fields/UserDefinedFieldsEmbeddedList.stories.js

@@ -67,4 +67,34 @@ export const HiddenTableSelector = useDragDrop(() => {
       onSave={onSave}
     />
   );
-});
+});
+
+export const CustomAddButton = useDragDrop(() => {
+  const [items, setItems] = useState([]);
+
+  /**
+   * Removes the passed item from the list.
+   *
+   * @type {function(*): void}
+   */
+  const onDelete = useCallback((item) => setItems((prevItems) => _.filter(prevItems, (i) => i !== item)), []);
+
+  /**
+   * Adds the passed item to the list.
+   *
+   * @type {function(*): void}
+   */
+  const onSave = useCallback((item) => setItems((prevItems) => [...prevItems, item]), []);
+
+  return (
+    <UserDefinedFieldsEmbeddedList
+      addButton={{
+        color: 'purple',
+        location: 'top'
+      }}
+      items={items}
+      onDelete={onDelete}
+      onSave={onSave}
+    />
+  );
+});

packages/storybook/src/user-defined-fields/UserDefinedFieldsList.stories.js

@@ -36,3 +36,33 @@ export const Default = useDragDrop(() => {
     />
   );
 });
+
+export const CustomAddButton = useDragDrop(() => {
+  const [items, setItems] = useState([]);
+
+  /**
+   * Removes the passed item from the list.
+   *
+   * @type {function(*): void}
+   */
+  const onDelete = useCallback((item) => setItems((prevItems) => _.filter(prevItems, (i) => i !== item)), []);
+
+  /**
+   * Adds the passed item to the list.
+   *
+   * @type {function(*): void}
+   */
+  const onSave = useCallback((item) => setItems((prevItems) => [...prevItems, item]), []);
+
+  return (
+    <UserDefinedFieldsList
+      addButton={{
+        color: 'purple',
+        location: 'top'
+      }}
+      items={items}
+      onDelete={onDelete}
+      onSave={onSave}
+    />
+  );
+});

packages/user-defined-fields/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -9,8 +9,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.0.23",
-    "@performant-software/shared-components": "^1.0.23",
+    "@performant-software/semantic-components": "^1.0.24",
+    "@performant-software/shared-components": "^1.0.24",
     "i18next": "^21.9.1",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/user-defined-fields/src/components/UserDefinedFieldsEmbeddedList.js

@@ -1,20 +1,26 @@
 // @flow
 
 import { BooleanIcon, EmbeddedList } from '@performant-software/semantic-components';
+import type { EmbeddedListProps } from '@performant-software/semantic-components/types';
 import React, { useCallback } from 'react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import UserDefinedFieldModal from './UserDefinedFieldModal';
 import UserDefinedFields from '../utils/UserDefinedFields';
 
-type Props = {
+type Props = EmbeddedListProps & {
   defaults: any,
-  excludeColumns?: Array<string>,
-  items: Array<any>,
-  onDelete: (item: any) => Promise<any>,
-  onSave: (item: any) => Promise<any>
+  excludeColumns?: Array<string>
 };
 
+const OMIT_PROPS = [
+  'actions',
+  'columns',
+  'defaults',
+  'excludeColumns',
+  'modal'
+];
+
 const DEFAULT_ORDER = 0;
 
 const UserDefinedFieldsEmbeddedList = (props: Props) => {
@@ -27,6 +33,7 @@ const UserDefinedFieldsEmbeddedList = (props: Props) => {
 
   return (
     <EmbeddedList
+      {..._.omit(props, OMIT_PROPS)}
       actions={[{
         name: 'edit'
       }, {
@@ -54,7 +61,6 @@ const UserDefinedFieldsEmbeddedList = (props: Props) => {
         label: i18n.t('UserDefinedFieldsEmbeddedList.columns.order'),
         hidden: isHidden('order')
       }]}
-      items={props.items}
       modal={{
         component: UserDefinedFieldModal,
         props: {
@@ -66,8 +72,6 @@ const UserDefinedFieldsEmbeddedList = (props: Props) => {
           validate: UserDefinedFields.validateUserDefinedField.bind(this)
         }
       }}
-      onDelete={props.onDelete}
-      onSave={props.onSave}
     />
   );
 };

packages/user-defined-fields/src/components/UserDefinedFieldsList.js

@@ -1,18 +1,31 @@
 // @flow
 
 import { BooleanIcon, ListTable } from '@performant-software/semantic-components';
+import type { ListTableProps } from '@performant-software/semantic-components/types';
 import React, { type ComponentType, useCallback } from 'react';
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import UserDefinedFieldModal from './UserDefinedFieldModal';
 import UserDefinedFields from '../utils/UserDefinedFields';
 import UserDefinedFieldsService from '../services/UserDefinedFields';
 
-type Props = {
+type Props = ListTableProps & {
   defaults?: any,
   excludeColumns?: Array<string>
 };
 
+const OMIT_PROPS = [
+  'actions',
+  'collectionName',
+  'columns',
+  'defaults',
+  'excludeColumns',
+  'modal',
+  'onDelete',
+  'onLoad',
+  'onSave'
+];
+
 const DEFAULT_ORDER = 0;
 
 const UserDefinedFieldsList: ComponentType<any> = (props: Props) => {
@@ -25,6 +38,7 @@ const UserDefinedFieldsList: ComponentType<any> = (props: Props) => {
 
   return (
     <ListTable
+      {..._.omit(props, OMIT_PROPS)}
       actions={[{
         name: 'edit'
       }, {
@@ -64,9 +78,9 @@ const UserDefinedFieldsList: ComponentType<any> = (props: Props) => {
           validate: UserDefinedFields.validateUserDefinedField.bind(this)
         }
       }}
+      onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
       onLoad={(params) => UserDefinedFieldsService.fetchAll(params)}
       onSave={(udf) => UserDefinedFieldsService.save(udf)}
-      onDelete={(udf) => UserDefinedFieldsService.delete(udf)}
     />
   );
 };

packages/visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./build/index.js",

react-components.json

@@ -6,5 +6,5 @@
     "packages/user-defined-fields",
     "packages/visualize"
   ],
-  "version": "1.0.23"
+  "version": "1.0.24"
 }