Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat:add categoryGapStatus/customerCategoryGap props #799

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat:add categoryGapStatus/customerCategoryGap props #799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
43c8dbe
feat:add categoryGapStatus/customerCategoryGap props
Feb 6, 2023
a619070
feat:add categoryGapStatus/customerCategoryGap props
Feb 6, 2023
f91037a
feat:add categoryGapStatus/customerCategoryGap props
Feb 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ function App() {
| **data** | `{}` | | Data to use for the picker |
| **i18n** | `{}` | | Localization data to use for the picker |
| **categories** | `[]` | `frequent`, `people`, `nature`, `foods`, `activity`, `places`, `objects`, `symbols`, `flags` | Categories to show in the picker. Order is respected. |
| **categoryGapStatus** | `normal` | `normal`, `none` | Whether to hide the category middle space. |
| **customerCategoryGap** | `` | `` | custom category gap html. |
| **custom** | `[]` | | [Custom emojis](#custom-emojis) |
| **onEmojiSelect** | `null` | | Callback when an emoji is selected |
| **onClickOutside** | `null` | | Callback when a click outside of the picker happens |
Expand Down
30 changes: 30 additions & 0 deletions packages/emoji-mart-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,25 @@
></span>
</div>

<div class="flex flex-middle">
Category Gap:&nbsp;<span class="select flex flex-grow"
><select id="categoryGapStatus" class="flex-grow">
<option value="normal">Normal</option>
<option value="none">None</option></select
><em-emoji id="arrow_down_small"></em-emoji
></span>
</div>

<div class="flex flex-middle">
Customer Category Gap:&nbsp;<span class="select flex flex-grow"></span>
<input
id="customerCategoryGap"
type="text"
placeholder="enter html string,blur will work"
style="min-width: 240px"
/>
</div>

<div class="flex flex-middle">
Auto focus:&nbsp;<span class="select flex flex-grow"
><select id="autoFocus" class="flex-grow">
Expand Down Expand Up @@ -211,6 +230,15 @@
})
}

const customerCategoryGapInputDom = document.getElementById(
'customerCategoryGap',
)
customerCategoryGapInputDom.addEventListener('blur', (e) => {
const { value } = e.target
localStorage['customerCategoryGap'] = value
window.location.reload(true)
})

const custom = JSON.parse(localStorage.custom || '[]')
const dialog = document.querySelector('dialog')
const form = dialog.querySelector('form')
Expand Down Expand Up @@ -297,6 +325,8 @@
locale: localStorage.locale,
navPosition: localStorage.navPosition,
previewPosition: localStorage.previewPosition,
categoryGapStatus: localStorage.categoryGapStatus,
customerCategoryGap: localStorage.customerCategoryGap,
searchPosition: localStorage.searchPosition,
skinTonePosition: localStorage.skinTonePosition,
onEmojiSelect: console.log,
Expand Down
2 changes: 2 additions & 0 deletions packages/emoji-mart/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ function App() {
| **data** | `{}` | | Data to use for the picker |
| **i18n** | `{}` | | Localization data to use for the picker |
| **categories** | `[]` | `frequent`, `people`, `nature`, `foods`, `activity`, `places`, `objects`, `symbols`, `flags` | Categories to show in the picker. Order is respected. |
| **categoryGapStatus** | `normal` | `normal`, `none` | Whether to hide the category middle space. |
| **customerCategoryGap** | `` | `` | custom category gap html. |
| **custom** | `[]` | | [Custom emojis](#custom-emojis) |
| **onEmojiSelect** | `null` | | Callback when an emoji is selected |
| **onClickOutside** | `null` | | Callback when a click outside of the picker happens |
Expand Down
18 changes: 14 additions & 4 deletions packages/emoji-mart/src/components/Picker/Picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -880,7 +880,7 @@ export default class Picker extends Component {
const { categories } = Data
const hidden = !!this.state.searchResults
const perLine = this.getPerLine()

const { categoryGapStatus, customerCategoryGap } = this.props
return (
<div
style={{
Expand All @@ -898,9 +898,19 @@ export default class Picker extends Component {
class="category"
ref={root}
>
<div class={`sticky padding-small align-${this.dir[0]}`}>
{category.name || I18n.categories[category.id]}
</div>
{categoryGapStatus === 'normal' ? (
customerCategoryGap ? (
<div
dangerouslySetInnerHTML={{ __html: customerCategoryGap }}
/>
) : (
<div class={`sticky padding-small align-${this.dir[0]}`}>
{category.name || I18n.categories[category.id]}
</div>
)
) : (
<></>
)}
<div
class="relative"
style={{
Expand Down
7 changes: 7 additions & 0 deletions packages/emoji-mart/src/components/Picker/PickerProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@ export default {
autoFocus: {
value: false,
},
categoryGapStatus: {
value: 'normal',
choices: ['normal', 'none'],
},
customerCategoryGap: {
value: '',
},
dynamicWidth: {
value: false,
},
Expand Down