@performant-software/semantic-components 1.0.18 → 1.0.19-beta.1

package/types/components/SimpleEditPage.js.flow

@@ -0,0 +1,246 @@
+// @flow
+
+import { Element } from '@performant-software/shared-components';
+import type { EditContainerProps } from '@performant-software/shared-components/types';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import {
+  Button,
+  Form,
+  Grid,
+  Menu,
+  MenuProps,
+  Message,
+  Ref,
+  Sticky
+} from 'semantic-ui-react';
+import _ from 'underscore';
+import i18n from '../i18n/i18n';
+import Toaster from './Toaster';
+import './SimpleEditPage.css';
+
+type Props = EditContainerProps & {
+  /**
+   * Additional class attribute to apply to the root DOM element.
+   */
+  className?: string,
+
+  /**
+   * Sets the default visible tab. If no value is provided, the first tab will be visible.
+   */
+  defaultTab?: string,
+
+  /**
+   * Props to provide to the Semantic UI `Menu` component.
+   */
+  menuProps?: typeof MenuProps,
+
+  /**
+   * Callback fired when the "Cancel" button is clicked.
+   */
+  onCancel: () => void,
+
+  /**
+   * Callback fired when a tab is clicked.
+   *
+   * @param tab
+   */
+  onTabClick?: (tab: string) => void,
+
+  /**
+   * If `true`, the saved toaster will display when the component is mounted.
+   */
+  saved?: boolean,
+
+  /**
+   * If `true`, the tabs menu will "stick" to the top of the window.
+   */
+  stickyMenu?: boolean
+};
+
+/**
+ * This component can be used to render the layout for a form/page with edit capabilities. Use in conjunction with the
+ * `withEditPage` higher-order component for a fully fledged record editing environment.
+ */
+const SimpleEditPage: any = (props: Props) => {
+  const [currentTab, setCurrentTab] = useState();
+  const [saved, setSaved] = useState(false);
+
+  const contentRef = useRef();
+
+  // $FlowIgnore
+  const tabs = Element.findByType(props.children, SimpleEditPage.Tab);
+  const tab = useMemo(() => _.find(tabs, (nextTab) => nextTab.key === currentTab), [currentTab, tabs]);
+
+  /**
+   * Memo-izes the class name variable.
+   *
+   * @type {string}
+   */
+  const className = useMemo(() => {
+    const classNames = ['simple-edit-page'];
+
+    if (props.className) {
+      classNames.push(props.className);
+    }
+
+    return classNames.join(' ');
+  }, [props.className]);
+
+  /**
+   * Sets the current tab.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onTabClick = useCallback((item) => {
+    const { key } = item;
+    setCurrentTab(key);
+
+    if (props.onTabClick) {
+      props.onTabClick(key);
+    }
+  }, [props.onTabClick]);
+
+  /**
+   * Renders the tab menu component.
+   *
+   * @type {(function(): (*))|*}
+   */
+  const renderTabs = useCallback(() => {
+    const menu = (
+      <Menu
+        {...props.menuProps}
+      >
+        { tabs?.length > 1 && _.map(tabs, (item) => (
+          <Menu.Item
+            active={item.key === currentTab}
+            disabled={props.loading || props.saving}
+            key={item.key}
+            name={item.props.name}
+            onClick={() => onTabClick(item)}
+          />
+        ))}
+        <Menu.Menu
+          position='right'
+        >
+          <Menu.Item
+            className='button-container'
+          >
+            <Button
+              content={i18n.t('Common.buttons.save')}
+              disabled={props.loading || props.saving}
+              onClick={props.onSave}
+              primary
+            />
+            <Button
+              basic
+              content={i18n.t('Common.buttons.cancel')}
+              disabled={props.loading || props.saving}
+              onClick={props.onCancel}
+            />
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+    );
+
+    if (props.stickyMenu) {
+      return (
+        <Sticky
+          context={contentRef}
+          offset={20}
+        >
+          { menu }
+        </Sticky>
+      );
+    }
+
+    return menu;
+  });
+
+  useEffect(() => {
+    // Sets the default tab to the first tab in the list, or the tab on the URL state
+    let defaultTab;
+
+    if (props.defaultTab) {
+      defaultTab = { key: props.defaultTab };
+    } else {
+      defaultTab = _.first(tabs);
+    }
+
+    if (defaultTab) {
+      onTabClick(defaultTab);
+    }
+
+    // Sets the saved indicator based on the URL state
+    if (props.saved) {
+      setSaved(true);
+    }
+  }, []);
+
+  return (
+    <Grid
+      className={className}
+    >
+      <Grid.Row>
+        <Grid.Column>
+          { renderTabs() }
+        </Grid.Column>
+      </Grid.Row>
+      <Grid.Row>
+        <Grid.Column>
+          <Ref
+            innerRef={contentRef}
+          >
+            <div>
+              <Form
+                error={!_.isEmpty(props.errors)}
+                loading={props.loading || props.saving}
+                noValidate
+              >
+                <Message
+                  error
+                  header={i18n.t('Common.errors.save')}
+                  list={props.errors}
+                />
+                { tab && tab.props.children }
+              </Form>
+              { saved && (
+                <Toaster
+                  onDismiss={() => setSaved(false)}
+                  type={Toaster.MessageTypes.positive}
+                >
+                  <Message.Header
+                    content={i18n.t('Common.messages.save.header')}
+                  />
+                  <Message.Content
+                    content={i18n.t('Common.messages.save.content')}
+                  />
+                </Toaster>
+              )}
+            </div>
+          </Ref>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
+  );
+};
+
+SimpleEditPage.defaultProps = {
+  menuProps: {
+    pointing: true,
+    secondary: true
+  }
+};
+
+const Tab = (props: any) => props.children;
+Tab.displayName = 'Tab';
+
+// $FlowIgnore
+const SimpleEditPageStatic = Object.assign(SimpleEditPage, { Tab });
+
+export default SimpleEditPageStatic;

package/types/index.js.flow

@@ -14,6 +14,7 @@ export { default as BibliographyForm } from './components/BibliographyForm';
 export { default as BibliographyList } from './components/BibliographyList';
 export { default as BibliographySearchInput } from './components/BibliographySearchInput';
 export { default as BooleanIcon } from './components/BooleanIcon';
+export { default as Breadcrumbs } from './components/Breadcrumbs';
 export { default as CancelButton } from './components/CancelButton';
 export { default as ColorButton } from './components/ColorButton';
 export { default as ColorPickerModal } from './components/ColorPickerModal';
@@ -88,6 +89,7 @@ export { default as Section } from './components/Section';
 export { default as Selectize } from './components/Selectize';
 export { default as SelectizeHeader } from './components/SelectizeHeader';
 export { default as SelectizeImageHeader } from './components/SelectizeImageHeader';
+export { default as SimpleEditPage } from './components/SimpleEditPage';
 export { default as StyleSelector } from './components/StyleSelector';
 export { default as TabbedModal } from './components/TabbedModal';
 export { default as TabsMenu } from './components/TabsMenu';