feat(editor): ✨ add title section clear buttons (#23)

j3ko · web-flow · commit d013500982cf · 2020-12-02T07:56:05.000+07:00
Add clear buttons for type, scope and gitmoji dropdowns so respective sections can be removed easily. Resolves #18
diff --git a/components/common/searchable-menu.component.tsx b/components/common/searchable-menu.component.tsx
@@ -1,4 +1,4 @@
-import { Col, Input, Row, Space, Typography } from 'antd';
+import { Col, Input, Row, Typography } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
 import { AiFillCloseCircle } from 'react-icons/ai';
@@ -33,6 +33,7 @@ const styles = (theme: CommitComposerTheme) => ({
   description: {
     fontSize: 12,
     paddingRight: 9,
+    marginBottom: '0 !important',
   },
   searchRow: {},
   itemRow: {
@@ -61,6 +62,7 @@ type Props = WithStylesProps<typeof styles> & OwnProps & ReduxProps & DispatchPr
 export interface State {
   searchInputRef: React.RefObject<Input>;
   visibleItems: RenderedItem[];
+  query: string;
 }
 
 class SearchableMenuComponent extends React.Component<Props, State> {
@@ -69,14 +71,15 @@ class SearchableMenuComponent extends React.Component<Props, State> {
     this.state = {
       searchInputRef: React.createRef(),
       visibleItems: this.renderItems(props.items),
+      query: '',
     };
   }
 
   componentDidMount(): void {
     this.focus();
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>): void {
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void {
     const { focus, items } = this.props;
 
     if (!prevProps.focus && focus) {
@@ -85,7 +88,7 @@ class SearchableMenuComponent extends React.Component<Props, State> {
 
     if (prevProps.items !== items) {
       this.setState({
-        visibleItems: this.renderItems(items),
+        visibleItems: this.renderItems(items, prevState.query),
       });
     }
   }
@@ -120,38 +123,40 @@ class SearchableMenuComponent extends React.Component<Props, State> {
   onSearch(query?: string): void {
     const { items } = this.props;
     const visibleItems = this.renderItems(items, query);
-    this.setState({ visibleItems });
+    this.setState({ visibleItems, query });
   }
 
   onSelect(item: string): void {
     this.clear();
     this.props.onClick?.(item);
   }
 
-  renderItems(items: SearchableItem[], query?: string): RenderedItem[] {
+  highlight(input: string, regex?: RegExp): { elem: JSX.Element; found: boolean } {
     const { classes } = this.props;
 
-    const highlight = (input: string, regex?: RegExp): { elem: JSX.Element; found: boolean } => {
-      if (input === '' || input === undefined) {
-        return;
-      }
+    if (input === '' || input === undefined) {
+      return;
+    }
 
-      const parts: React.ReactNode[] = input.split(regex);
-      let found = false;
+    const parts: React.ReactNode[] = input.split(regex);
+    let found = false;
 
-      for (let i = 1; i < parts.length; i += 2) {
-        parts[i] = (
-          <span key={i} className={classes.highlight}>
-            {parts[i]}
-          </span>
-        );
-        found = true;
-      }
-      return {
-        elem: <Typography.Text>{parts}</Typography.Text>,
-        found,
-      };
+    for (let i = 1; i < parts.length; i += 2) {
+      parts[i] = (
+        <span key={i} className={classes.highlight}>
+          {parts[i]}
+        </span>
+      );
+      found = true;
+    }
+    return {
+      elem: <>{parts}</>,
+      found,
     };
+  }
+
+  renderItems(items: SearchableItem[], query?: string): RenderedItem[] {
+    const { classes } = this.props;
 
     const escapeRegExp = (str: string): string => {
       return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -160,18 +165,23 @@ class SearchableMenuComponent extends React.Component<Props, State> {
     return items
       .map((x) => {
         const titleRegex = query ? new RegExp(`(${escapeRegExp(query)})`, 'gi') : undefined;
-        const title = highlight(x.title, titleRegex);
+        const title = this.highlight(x.title, titleRegex);
         const descriptionRegex = query ? new RegExp(`(${escapeRegExp(query)})`, 'gi') : undefined;
-        const description = highlight(x.description, descriptionRegex);
+        const description = this.highlight(x.description, descriptionRegex);
 
         const found =
           query === undefined || query === '' || title.found || (description && description.found);
 
         if (description) {
-          description.elem = React.cloneElement(description.elem, {
-            type: 'secondary',
-            className: classes.description,
-          });
+          description.elem = (
+            <Typography.Paragraph type="secondary" className={classes.description} ellipsis>
+              {description.elem}
+            </Typography.Paragraph>
+          );
+        }
+
+        if (title) {
+          title.elem = <Typography.Text>{title.elem}</Typography.Text>;
         }
 
         return {
@@ -187,7 +197,7 @@ class SearchableMenuComponent extends React.Component<Props, State> {
 
   render(): JSX.Element {
     const { classes, className, searchBarClassName, children } = this.props;
-    const { visibleItems } = this.state;
+    const { visibleItems, query } = this.state;
 
     return (
       <div className={classNames(classes.root, className)}>
@@ -202,7 +212,7 @@ class SearchableMenuComponent extends React.Component<Props, State> {
             />
             <span
               className={classNames('ant-input-suffix', {
-                [classes.hidden]: !this.state.searchInputRef?.current?.input.value,
+                [classes.hidden]: !query,
               })}>
               <span
                 tabIndex={-1}
@@ -224,15 +234,15 @@ class SearchableMenuComponent extends React.Component<Props, State> {
                 key={x.item}
                 item={x.item}
                 icon={x.icon}>
-                <Space size={1} direction="vertical">
+                <>
                   {x.title}
                   {x.description}
-                </Space>
+                </>
               </SearchableMenuItemComponent>
             ))}
           </Col>
         </Row>
-        <Row onClick={(e) => e.stopPropagation()}>
+        <Row>
           <Col flex="auto">{children}</Col>
         </Row>
       </div>
diff --git a/components/editor/state/editor.epic.ts b/components/editor/state/editor.epic.ts
@@ -1,4 +1,8 @@
-import { GitmojiSelectAction, TypeSelectAction } from 'components/preset/state/preset.action';
+import {
+  GitmojiSelectAction,
+  ScopeSelectAction,
+  TypeSelectAction,
+} from 'components/preset/state/preset.action';
 import { Epic } from 'redux-observable';
 import { PlainAction } from 'redux-typed-actions';
 import { concat, of } from 'rxjs';
@@ -15,6 +19,7 @@ export const updateValidation: Epic<PlainAction, PlainAction, AppState> = (actio
       EditorFormatAction.type,
       GitmojiSelectAction.type,
       TypeSelectAction.type,
+      ScopeSelectAction.type,
     )
     .pipe(
       debounceTime(250),
diff --git a/components/preset/gitmoji-picker.component.tsx b/components/preset/gitmoji-picker.component.tsx
@@ -1,4 +1,4 @@
-import { Button, Dropdown, Space, Switch, Typography } from 'antd';
+import { Button, Col, Dropdown, Row, Space, Switch, Typography } from 'antd';
 import classNames from 'classnames';
 import RecentListComponent, { RecentItem } from 'components/common/recent-list.component';
 import SearchableMenuComponent from 'components/common/searchable-menu.component';
@@ -16,7 +16,7 @@ const styles = (theme: CommitComposerTheme) => ({
     border: `1px solid ${theme.lighter}`,
     display: 'block',
     [`@media only screen and (min-width: ${theme.screenMD})`]: {
-      maxWidth: 380,
+      maxWidth: 400,
     },
   },
   items: {
@@ -79,7 +79,6 @@ const styles = (theme: CommitComposerTheme) => ({
   },
   actionContainer: {
     padding: '4px 9px',
-    justifyContent: 'flex-end',
     width: '100%',
     backgroundColor: theme.lighter,
   },
@@ -93,7 +92,7 @@ export interface ReduxProps {
   preset: PresetState;
 }
 export interface DispatchProps {
-  gitmojiSelected: (gitmoji: GitmojiDefinition) => void;
+  gitmojiSelected: (gitmoji: GitmojiDefinition | null) => void;
   toggleShortcode: (value: boolean) => void;
 }
 type Props = WithStylesProps<typeof styles> & OwnProps & ReduxProps & DispatchProps;
@@ -111,6 +110,11 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
     };
   }
 
+  handleClear(): void {
+    const { gitmojiSelected } = this.props;
+    gitmojiSelected(null);
+  }
+
   handleClick(key: string): void {
     setTimeout(() => {
       const { gitmojiSelected } = this.props;
@@ -168,16 +172,25 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
               </span>
             ),
           }))}>
-          <Space className={classes.actionContainer}>
-            <Typography.Text className={classes.actionText}>Shortcode:</Typography.Text>
-            <Switch
-              size="small"
-              defaultChecked={preset.useShortcode}
-              checkedChildren={<AiOutlineCheck />}
-              unCheckedChildren={<AiOutlineClose />}
-              onChange={(x) => toggleShortcode(x)}
-            />
-          </Space>
+          <Row justify="space-between" className={classes.actionContainer}>
+            <Col>
+              <Button size="small" type="link" onClick={() => this.handleClear()}>
+                Clear
+              </Button>
+            </Col>
+            <Col>
+              <Space>
+                <Typography.Text className={classes.actionText}>Shortcode:</Typography.Text>
+                <Switch
+                  size="small"
+                  defaultChecked={preset.useShortcode}
+                  checkedChildren={<AiOutlineCheck />}
+                  unCheckedChildren={<AiOutlineClose />}
+                  onChange={(x) => toggleShortcode(x)}
+                />
+              </Space>
+            </Col>
+          </Row>
         </SearchableMenuComponent>
       </span>
     );
@@ -186,6 +199,7 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
       <Dropdown
         overlayClassName={classes.overlay}
         overlay={menu}
+        visible={visible}
         onVisibleChange={(visible) => this.handleVisibilityChange(visible)}
         trigger={['click']}
         placement="bottomRight">
diff --git a/components/preset/scope-picker.component.tsx b/components/preset/scope-picker.component.tsx
@@ -1,4 +1,4 @@
-import { Button, Dropdown } from 'antd';
+import { Button, Col, Dropdown, Row } from 'antd';
 import classNames from 'classnames';
 import RecentListComponent, { RecentItem } from 'components/common/recent-list.component';
 import SearchableMenuComponent from 'components/common/searchable-menu.component';
@@ -16,7 +16,7 @@ const styles = (theme: CommitComposerTheme) => ({
     border: `1px solid ${theme.lighter}`,
     display: 'block',
     [`@media only screen and (min-width: ${theme.screenMD})`]: {
-      maxWidth: 585,
+      maxWidth: 400,
     },
   },
   items: {
@@ -64,6 +64,11 @@ const styles = (theme: CommitComposerTheme) => ({
       backgroundColor: theme.itemHoverBG,
     },
   },
+  actionContainer: {
+    padding: '4px 9px',
+    width: '100%',
+    backgroundColor: theme.lighter,
+  },
 });
 
 export interface OwnProps {}
@@ -88,6 +93,11 @@ class ScopePickerComponent extends React.Component<Props, State> {
     };
   }
 
+  handleClear(): void {
+    const { scopeSelected } = this.props;
+    scopeSelected(null);
+  }
+
   handleClick(key: string): void {
     setTimeout(() => {
       const { scopeSelected } = this.props;
@@ -132,15 +142,23 @@ class ScopePickerComponent extends React.Component<Props, State> {
           items={preset.scopes.map((x) => ({
             item: x,
             title: `(${x})`,
-          }))}
-        />
+          }))}>
+          <Row justify="space-between" className={classes.actionContainer}>
+            <Col>
+              <Button size="small" type="link" onClick={() => this.handleClear()}>
+                Clear
+              </Button>
+            </Col>
+          </Row>
+        </SearchableMenuComponent>
       </span>
     );
 
     return preset.scopes.length || preset.recentScopes.length ? (
       <Dropdown
         overlayClassName={classes.overlay}
         overlay={menu}
+        visible={visible}
         onVisibleChange={(visible) => this.handleVisibilityChange(visible)}
         trigger={['click']}
         placement="bottomRight">
diff --git a/components/preset/state/preset.action.ts b/components/preset/state/preset.action.ts
@@ -2,7 +2,7 @@ import { defineAction } from 'redux-typed-actions';
 import { GitmojiDefinition } from 'shared/presets/gitmojis';
 import { TypeDefinition } from 'shared/presets/types';
 
-export const GitmojiSelectAction = defineAction<GitmojiDefinition>('GitmojiSelectAction');
-export const TypeSelectAction = defineAction<TypeDefinition>('TypeSelectAction');
+export const GitmojiSelectAction = defineAction<GitmojiDefinition | null>('GitmojiSelectAction');
+export const TypeSelectAction = defineAction<TypeDefinition | null>('TypeSelectAction');
 export const ToggleShortcodeAction = defineAction<boolean>('ToggleShortcodeAction');
-export const ScopeSelectAction = defineAction<string>('ScopeSelectAction');
+export const ScopeSelectAction = defineAction<string | null>('ScopeSelectAction');
diff --git a/components/preset/state/preset.reducer.ts b/components/preset/state/preset.reducer.ts
@@ -18,22 +18,28 @@ const presetReducer = (
 ): PresetState => {
   if (GitmojiSelectAction.is(action)) {
     const { payload } = action;
-    const map = state.recentGitmojis.map((x) => ({ key: x.shortcode, value: x }));
-    const cache = new LRUCache<GitmojiDefinition>(map, 20);
-    cache.write(payload.shortcode, payload);
-    state.recentGitmojis = cache.toArray();
+    if (payload) {
+      const map = state.recentGitmojis.map((x) => ({ key: x.shortcode, value: x }));
+      const cache = new LRUCache<GitmojiDefinition>(map, 20);
+      cache.write(payload.shortcode, payload);
+      state.recentGitmojis = cache.toArray();
+    }
   } else if (TypeSelectAction.is(action)) {
     const { payload } = action;
-    const map = state.recentTypes.map((x) => ({ key: x.key, value: x }));
-    const cache = new LRUCache<TypeDefinition>(map, 20);
-    cache.write(payload.key, payload);
-    state.recentTypes = cache.toArray();
+    if (payload) {
+      const map = state.recentTypes.map((x) => ({ key: x.key, value: x }));
+      const cache = new LRUCache<TypeDefinition>(map, 20);
+      cache.write(payload.key, payload);
+      state.recentTypes = cache.toArray();
+    }
   } else if (ScopeSelectAction.is(action)) {
     const { payload } = action;
-    const map = state.recentScopes.map((x) => ({ key: x, value: x }));
-    const cache = new LRUCache<string>(map, 20);
-    cache.write(payload, payload);
-    state.recentScopes = cache.toArray();
+    if (payload) {
+      const map = state.recentScopes.map((x) => ({ key: x, value: x }));
+      const cache = new LRUCache<string>(map, 20);
+      cache.write(payload, payload);
+      state.recentScopes = cache.toArray();
+    }
   } else if (ToggleShortcodeAction.is(action)) {
     state.useShortcode = action.payload;
   } else if (RulesetParseAsync.success.is(action)) {
diff --git a/components/preset/type-picker.component.tsx b/components/preset/type-picker.component.tsx
diff --git a/shared/__tests__/commit-message.spec.ts b/shared/__tests__/commit-message.spec.ts
diff --git a/shared/commit-message.lib.ts b/shared/commit-message.lib.ts
