Skip to content

Commit

Permalink
feat: upgrade to angular 8
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: requires angular > v8.x
  • Loading branch information
@scttcper
scttcper committed Aug 5, 2019
1 parent 4318999 commit b046d14
Show file tree
Hide file tree
Showing 17 changed files with 7,558 additions and 7,335 deletions.
69 changes: 46 additions & 23 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<img align="right" width="200" src="https://raw.githubusercontent.com/typectrl/ngx-emoji-mart/master/misc/preview.png" />

# ngx-emoji-mart

[![npm](https://badge.fury.io/js/%40ctrl%2Fngx-emoji-mart.svg)](https://www.npmjs.org/package/@ctrl/ngx-emoji-mart)
[![travis](https://travis-ci.org/TypeCtrl/ngx-emoji-mart.svg?branch=master)](https://travis-ci.org/TypeCtrl/ngx-emoji-mart)
[![codecov](https://img.shields.io/codecov/c/github/typectrl/ngx-emoji-mart.svg)](https://codecov.io/github/typectrl/ngx-emoji-mart)

**DEMO**: https://typectrl.github.io/ngx-emoji-mart/

__DEMO__: https://typectrl.github.io/ngx-emoji-mart/

This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by missive
This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by missive

- [Installation](#installation)
- [Components](#components)
Expand All @@ -25,19 +25,33 @@ This project is a port of [emoji-mart](https://github.com/missive/emoji-mart) by
npm install @ctrl/ngx-emoji-mart
```

## Dependencies

Latest version available for each version of Angular

| @ctrl/ngx-emoji-mart | Angular |
| -------------------- | ------- |
| 0.17.0 | 6.x 7.x |
| 1.0.0 | >8 |

## Components

### Picker

Import Module in ngModule

```ts
import { PickerModule } from '@ctrl/ngx-emoji-mart'
import { PickerModule } from '@ctrl/ngx-emoji-mart';
```

Import styles in styles.scss if using SASS

```scss
@import "~@ctrl/ngx-emoji-mart/picker";
@import '~@ctrl/ngx-emoji-mart/picker';
```

Or angular-cli can also include it via angular-cli.json

```
"styles": [
"styles.scss",
Expand All @@ -46,12 +60,17 @@ Or angular-cli can also include it via angular-cli.json
```

use component

```html
<emoji-mart title="Pick your emoji…" emoji="point_up"></emoji-mart>
<emoji-mart set="emojione"></emoji-mart>
<emoji-mart (emojiClick)="addEmoji($event)"></emoji-mart>
<emoji-mart [style]="{ position: 'absolute', bottom: '20px', right: '20px' }"></emoji-mart>
<emoji-mart [i18n]="{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }"></emoji-mart>
<emoji-mart
[style]="{ position: 'absolute', bottom: '20px', right: '20px' }"
></emoji-mart>
<emoji-mart
[i18n]="{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }"
></emoji-mart>
```

| Prop | Default | Description |
Expand Down Expand Up @@ -83,7 +102,7 @@ use component
| **notFoundEmoji** | `sleuth_or_spy` | The emoji shown when there are no search results |
| **categoriesIcons** | see `svgs/index.ts` | the anchor icons |
| **searchIcons** | see `svgs/index.ts` | the search/close icon in the search bar |
| **showSingleCategory** | | show only one category at a time to increase rendering performance |
| **showSingleCategory** | | show only one category at a time to increase rendering performance |

#### I18n

Expand Down Expand Up @@ -184,20 +203,21 @@ Sheets are served from [unpkg](https://unpkg.com), a global CDN that serves file
```

### Emoji

```ts
import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji'
import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
```

```html
<ngx-emoji [emoji]="{ id: 'santa', skin: 3 }" size="16"></ngx-emoji>
<ngx-emoji emoji=':santa::skin-tone-3:' size="16"></ngx-emoji>
<ngx-emoji emoji='santa' set='emojione' size="16"></ngx-emoji>
<ngx-emoji emoji=":santa::skin-tone-3:" size="16"></ngx-emoji>
<ngx-emoji emoji="santa" set="emojione" size="16"></ngx-emoji>
```

| Prop | Required | Default | Description |
| -------------------------------------------- | :------: | ------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **emoji** | ✓ | | Either a string or an `emoji` object |
| **size** | ✓ | | The emoji width and height. |
| **emoji** | ✓ | | Either a string or an `emoji` object |
| **size** | ✓ | | The emoji width and height. |
| **native** | | `false` | Renders the native unicode emoji |
| **(emojiClick)** | | | Params: `{ emoji, $event }` |
| **(emojiLeave)** | | | Params: `{ emoji, $event }` |
Expand All @@ -215,9 +235,12 @@ import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji'
Certain sets don’t support all emojis (i.e. Messenger & Facebook don’t support `:shrug:`). By default the Emoji component will not render anything so that the emojis’ don’t take space in the picker when not available. When using the standalone Emoji component, you can however render anything you want by providing the `fallback` props.

To have the component render `:shrug:` you would need to:

```ts
emojiFallback = (emoji: any, props: any) => emoji ? `:${emoji.shortNames[0]}:` : props.emoji
emojiFallback = (emoji: any, props: any) =>
emoji ? `:${emoji.shortNames[0]}:` : props.emoji;
```

```html
<ngx-emoji
set="messenger"
Expand All @@ -239,23 +262,25 @@ const customEmojis = [
text: '',
emoticons: [],
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7',
},
{
name: 'Test Flag',
shortNames: ['test'],
text: '',
emoticons: [],
keywords: ['test', 'flag'],
spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
spriteUrl:
'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
sheet_x: 1,
sheet_y: 1,
size: 64,
sheetColumns: 52,
sheetRows: 52,
},
]
];
```

```html
<emoji-mart [custom]="customEmojis"></emoji-mart>
```
Expand Down Expand Up @@ -288,13 +313,12 @@ document.body.appendChild(el);

By default EmojiMart will store user chosen skin and frequently used emojis in `localStorage`.


Possible keys are:

| Key | Value | Description |
| ---------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| skin | `1, 2, 3, 4, 5, 6` | |
| frequently | `{ 'astonished': 11, '+1': 22 }` | An object where the key is the emoji name and the value is the usage count |
| Key | Value | Description |
| ---------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| skin | `1, 2, 3, 4, 5, 6` | |
| frequently | `{ 'astonished': 11, '+1': 22 }` | An object where the key is the emoji name and the value is the usage count |
| last | 'astonished' | (Optional) Used by `frequently` to be sure the latest clicked emoji will always appear in the “Recent” category |

## Features
Expand Down Expand Up @@ -339,7 +363,6 @@ Apple / Google / Twitter / EmojiOne / Messenger / Facebook

<img width="214" alt="sets" src="https://raw.githubusercontent.com/typectrl/ngx-emoji-mart/master/misc/sets.png">


---

> GitHub [@scttcper](https://github.com/scttcper) &nbsp;&middot;&nbsp;
Expand Down
10 changes: 8 additions & 2 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
Expand Down Expand Up @@ -50,6 +51,11 @@
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
Expand Down Expand Up @@ -93,10 +99,10 @@
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"format": "stylish",
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json"
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
Expand Down
6 changes: 3 additions & 3 deletions build.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { copySync } from 'fs-extra';
import { ngPackagr } from 'ng-packagr';
import { join } from 'path';
import * as rimraf from 'rimraf';
import * as del from 'del';

async function main() {
// cleanup dist
rimraf.sync(join(process.cwd(), '/dist'));
rimraf.sync(join(process.cwd(), '/node_modules/@ctrl/ngx-emoji-mart'));
del.sync(join(process.cwd(), '/dist'));
del.sync(join(process.cwd(), '/node_modules/@ctrl/ngx-emoji-mart'));

// make emoi
await ngPackagr()
Expand Down
8 changes: 0 additions & 8 deletions circle.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,6 @@ jobs:
- run: npm install
- run: npm run build
- run: npm run semantic-release
- run:
name: Install and configure dependencies
command: |
git config user.email "scttcper@gmail.com"
git config user.name "ci-build"
ssh-add -D
- run: npm run ghpages
- run: npx gh-pages -x -d dist -m "update docs [ci skip]" -r https://${GH_TOKEN}@github.com/typectrl/ngx-emoji-mart.git

workflows:
version: 2
Expand Down
Loading

0 comments on commit b046d14

Please sign in to comment.