feat: 🎉 support unicode gitmojis

Add toggle to switch between shortcode and unicode gitmojis

closes #9

Author: j3ko

components/common/recent-list-item.component.tsx

@@ -12,7 +12,7 @@ const styles = (theme: CommitComposerTheme) => ({
   itemContainer: {
     minHeight: 25,
     minWidth: 25,
-    padding: 10,
+    padding: '5px 10px',
     '&:hover': {
       backgroundColor: theme.itemHoverBG,
       cursor: 'pointer',
@@ -24,6 +24,7 @@ const styles = (theme: CommitComposerTheme) => ({
 });
 
 export interface OwnProps {
+  itemClassName?: string;
   item: string;
   title: string;
   display?: JSX.Element;
@@ -36,11 +37,13 @@ export interface State {}
 
 class RecentListItemComponent extends React.Component<Props, State> {
   render(): JSX.Element {
-    const { classes, display, item, title, onClick } = this.props;
+    const { classes, display, item, itemClassName, title, onClick } = this.props;
 
     return (
       <Tooltip overlayClassName={classes.tooltip} title={title} mouseLeaveDelay={0}>
-        <Col className={classNames(classes.itemContainer)} onClick={() => onClick?.(item)}>
+        <Col
+          className={classNames(classes.itemContainer, itemClassName)}
+          onClick={() => onClick?.(item)}>
           <Row className={classes.center}>{display}</Row>
         </Col>
       </Tooltip>

components/common/recent-list.component.tsx

@@ -21,12 +21,13 @@ const styles = {
   },
   itemRow: {
     overflow: 'hidden',
-    maxHeight: 42,
+    maxHeight: 32,
   },
 };
 
 export interface OwnProps {
   className?: string;
+  itemClassName?: string;
   onClick?: (item: string) => void;
   items: RecentItem[];
 }
@@ -37,7 +38,7 @@ export interface State {}
 
 class RecentListComponent extends React.Component<Props, State> {
   render(): JSX.Element {
-    const { classes, items, className, onClick } = this.props;
+    const { classes, items, className, itemClassName, onClick } = this.props;
 
     return items && items.length ? (
       <Row className={classNames(classes.root, className)}>
@@ -46,6 +47,7 @@ class RecentListComponent extends React.Component<Props, State> {
           <Row className={classes.itemRow}>
             {items.map((x) => (
               <RecentListItemComponent
+                itemClassName={itemClassName}
                 key={x.item}
                 item={x.item}
                 title={x.title}

components/common/searchable-menu-item.component.tsx

@@ -2,17 +2,17 @@ import { Col, Row } from 'antd';
 import React from 'react';
 import withStyles, { WithStylesProps } from 'react-jss';
 
-const styles = {
+const styles = (theme: CommitComposerTheme) => ({
   root: {
     whiteSpace: 'nowrap',
     padding: '9px',
     flexWrap: 'nowrap',
     '&:hover': {
-      backgroundColor: '#f5f5f5',
+      backgroundColor: theme.itemHoverBG,
       cursor: 'pointer',
     },
   },
-};
+});
 
 export interface OwnProps {
   item: string;

components/common/searchable-menu.component.tsx

@@ -34,9 +34,7 @@ const styles = (theme: CommitComposerTheme) => ({
     fontSize: 12,
     paddingRight: 9,
   },
-  searchRow: {
-    padding: 9,
-  },
+  searchRow: {},
   itemRow: {
     overflowY: 'auto',
     overflowX: 'hidden',
@@ -51,6 +49,7 @@ const styles = (theme: CommitComposerTheme) => ({
 });
 
 export interface OwnProps {
+  searchBarClassName?: string;
   className?: string;
   onClick?: (item: string) => void;
   focus: boolean;
@@ -172,12 +171,12 @@ class SearchableMenuComponent extends React.Component<Props, State> {
   }
 
   render(): JSX.Element {
-    const { classes, className } = this.props;
+    const { classes, className, searchBarClassName, children } = this.props;
     const { visibleItems } = this.state;
 
     return (
       <div className={classNames(classes.root, className)}>
-        <Row className={classes.searchRow}>
+        <Row className={classNames(classes.searchRow, searchBarClassName)}>
           <span className="ant-input-affix-wrapper">
             <Input
               placeholder="Search"
@@ -218,6 +217,9 @@ class SearchableMenuComponent extends React.Component<Props, State> {
             ))}
           </Col>
         </Row>
+        <Row onClick={(e) => e.stopPropagation()}>
+          <Col flex="auto">{children}</Col>
+        </Row>
       </div>
     );
   }

components/editor/gitmoji-picker.component.tsx

@@ -1,15 +1,15 @@
-import { Button, Dropdown } from 'antd';
+import { Button, Dropdown, Space, Switch, Typography } from 'antd';
 import classNames from 'classnames';
 import RecentListComponent from 'components/common/recent-list.component';
 import SearchableMenuComponent from 'components/common/searchable-menu.component';
 import React from 'react';
-import { AiOutlineDown } from 'react-icons/ai';
+import { AiOutlineCheck, AiOutlineClose, AiOutlineDown } from 'react-icons/ai';
 import withStyles, { WithStylesProps } from 'react-jss';
 import { connect, Dispatch } from 'react-redux';
 import { GitmojiDefinition, GITMOJIS } from 'shared/presets/gitmojis';
 import { AppState, EditorState } from 'state';
 
-import { GitmojiSelectAction } from './state/editor.action';
+import { GitmojiSelectAction, ToggleShortcodeAction } from './state/editor.action';
 
 const styles = (theme: CommitComposerTheme) => ({
   menu: {
@@ -60,8 +60,30 @@ const styles = (theme: CommitComposerTheme) => ({
       minWidth: 'unset',
     },
   },
+  searchBar: {
+    backgroundColor: theme.lighter,
+    padding: 9,
+  },
+  noTopPadding: {
+    paddingTop: 0,
+  },
   recentList: {
     maxHeight: 70,
+    backgroundColor: theme.lighter,
+  },
+  recentItem: {
+    '&:hover': {
+      backgroundColor: theme.itemHoverBG,
+    },
+  },
+  actionContainer: {
+    padding: '4px 9px',
+    justifyContent: 'flex-end',
+    width: '100%',
+    backgroundColor: theme.lighter,
+  },
+  actionText: {
+    fontSize: 12,
   },
 });
 
@@ -71,6 +93,7 @@ export interface ReduxProps {
 }
 export interface DispatchProps {
   gitmojiSelected: (gitmoji: GitmojiDefinition) => void;
+  toggleShortcode: (value: boolean) => void;
 }
 type Props = WithStylesProps<typeof styles> & OwnProps & ReduxProps & DispatchProps;
 export interface State {
@@ -106,12 +129,13 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
   }
 
   render(): JSX.Element {
-    const { classes, editor } = this.props;
+    const { classes, editor, toggleShortcode } = this.props;
     const { hovered, visible } = this.state;
 
     const menu = (
       <span className={classes.menu}>
         <RecentListComponent
+          itemClassName={classes.recentItem}
           className={classes.recentList}
           onClick={(key) => this.handleClick(key)}
           items={editor.recentGitmojis.map((x) => ({
@@ -127,6 +151,9 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
         <SearchableMenuComponent
           focus={visible}
           className={classes.items}
+          searchBarClassName={classNames(classes.searchBar, {
+            [classes.noTopPadding]: Boolean(editor.recentGitmojis?.length),
+          })}
           onClick={(key) => this.handleClick(key)}
           items={GITMOJIS.map((x) => ({
             item: x.shortcode,
@@ -137,8 +164,18 @@ class GitmojiPickerComponent extends React.Component<Props, State> {
                 {x.icon}
               </span>
             ),
-          }))}
-        />
+          }))}>
+          <Space className={classes.actionContainer}>
+            <Typography.Text className={classes.actionText}>Shortcode:</Typography.Text>
+            <Switch
+              size="small"
+              defaultChecked={editor.useShortcode}
+              checkedChildren={<AiOutlineCheck />}
+              unCheckedChildren={<AiOutlineClose />}
+              onChange={(x) => toggleShortcode(x)}
+            />
+          </Space>
+        </SearchableMenuComponent>
       </span>
     );
 
@@ -178,6 +215,7 @@ function mapStateToProps(state: AppState): ReduxProps {
 function mapDispatchToProps(dispatch: Dispatch): DispatchProps {
   return {
     gitmojiSelected: (gitmoji) => dispatch(GitmojiSelectAction.get(gitmoji)),
+    toggleShortcode: (value) => dispatch(ToggleShortcodeAction.get(value)),
   };
 }
 

components/editor/state/editor.action.ts

@@ -11,3 +11,4 @@ export const EditorFormatAction = defineAction('EditorFormatAction');
 export const EditorLoadAction = defineAction<boolean>('EditorLoadAction');
 export const GitmojiSelectAction = defineAction<GitmojiDefinition>('GitmojiSelectAction');
 export const TypeSelectAction = defineAction<TypeDefinition>('TypeSelectAction');
+export const ToggleShortcodeAction = defineAction<boolean>('ToggleShortcodeAction');

components/editor/state/editor.reducer.ts

@@ -10,6 +10,7 @@ import {
   EditorLoadAction,
   EditorUpdatedAction,
   GitmojiSelectAction,
+  ToggleShortcodeAction,
   TypeSelectAction,
   ValidationUpdatedAsync,
 } from './editor.action';
@@ -36,7 +37,7 @@ const editorReducer = (
     state.loading = action.payload;
   } else if (GitmojiSelectAction.is(action)) {
     const { payload } = action;
-    state.editorValue = CommitMessageLib.setGitmoji(state.editorValue, payload);
+    state.editorValue = CommitMessageLib.setGitmoji(state.editorValue, payload, state.useShortcode);
 
     const map = state.recentGitmojis.map((x) => ({ key: x.shortcode, value: x }));
     const cache = new LRUCache<GitmojiDefinition>(map, 20);
@@ -50,6 +51,8 @@ const editorReducer = (
     const cache = new LRUCache<TypeDefinition>(map, 20);
     cache.write(payload.key, payload);
     state.recentTypes = cache.toArray();
+  } else if (ToggleShortcodeAction.is(action)) {
+    state.useShortcode = action.payload;
   }
 
   return state;

components/editor/type-picker.component.tsx

@@ -48,8 +48,21 @@ const styles = (theme: CommitComposerTheme) => ({
       minWidth: 'unset',
     },
   },
+  searchBar: {
+    backgroundColor: theme.lighter,
+    padding: 9,
+  },
+  noTopPadding: {
+    paddingTop: 0,
+  },
   recentList: {
     maxHeight: 70,
+    backgroundColor: theme.lighter,
+  },
+  recentItem: {
+    '&:hover': {
+      backgroundColor: theme.itemHoverBG,
+    },
   },
 });
 
@@ -100,6 +113,7 @@ class TypePickerComponent extends React.Component<Props, State> {
     const menu = (
       <span className={classes.menu}>
         <RecentListComponent
+          itemClassName={classes.recentItem}
           className={classes.recentList}
           onClick={(key) => this.handleClick(key)}
           items={editor.recentTypes.map((x) => ({
@@ -111,6 +125,9 @@ class TypePickerComponent extends React.Component<Props, State> {
         <SearchableMenuComponent
           focus={visible}
           className={classes.items}
+          searchBarClassName={classNames(classes.searchBar, {
+            [classes.noTopPadding]: Boolean(editor.recentTypes?.length),
+          })}
           onClick={(key) => this.handleClick(key)}
           items={TYPES.map((x) => ({
             item: x.key,