treehouse
/
emoji-mart-lazyload
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add theme selection to gh-pages

release
Etienne Lemay 2019-12-23 08:51:53 -05:00
parent e39c1e53d8
commit e66be9dc4e
No known key found for this signature in database
GPG Key ID: EE7CF89146BB28E9
3 changed files with 84 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/bundle.js
View File

@ -3401,8 +3401,11 @@ class Example extends __WEBPACK_IMPORTED_MODULE_1_react___default.a.Component {
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'div',
{ className: 'row sets' },
'Set:\xA0',
['native', 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'].map(set => {
var props = { disabled: !this.state.native && set == this.state.set };
var props = {
disabled: !this.state.native && set == this.state.set
};
if (set == 'native' && this.state.native) {
props.disabled = true;
@ -3425,12 +3428,45 @@ class Example extends __WEBPACK_IMPORTED_MODULE_1_react___default.a.Component {
);
})
),
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'div',
{ className: 'row-small sets' },
'Theme:\xA0',
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'button',
{
disabled: this.state.darkMode == undefined,
onClick: () => {
this.setState({ darkMode: undefined });
}
},
'auto'
),
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'button',
{
disabled: this.state.darkMode == false,
onClick: () => {
this.setState({ darkMode: false });
}
},
'light'
),
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'button',
{
disabled: this.state.darkMode,
onClick: () => {
this.setState({ darkMode: true });
}
},
'dark'
)
),
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'div',
{ className: 'row' },
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_3__src__["a" /* Picker */], Object(__WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__["a" /* default */])({}, this.state, {
onSelect: console.log
}))
__WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_3__src__["a" /* Picker */], Object(__WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__["a" /* default */])({}, this.state, { onSelect: console.log }))
)
);
}

13
docs/emoji-mart.css
View File

@ -419,12 +419,18 @@
.emoji-mart-dark {
color: #fff;
border-color: #555453;
background-color: #222;
}
.emoji-mart-dark .emoji-mart-bar {
border-color: #555453;
}
.emoji-mart-dark .emoji-mart-search input {
background-color: #2f2f2f;
color: #fff;
border-color: #555453;
background-color: #2f2f2f;
}
.emoji-mart-dark .emoji-mart-search-icon svg {
@ -439,3 +445,8 @@
background-color: #222;
color: #fff;
}
.emoji-mart-dark .emoji-mart-skin-swatches {
border-color: #555453;
background-color: #222;
}

32
docs/index.js
View File

@ -56,6 +56,7 @@ class Example extends React.Component {
</div>
<div className="row sets">
Set: 
{[
'native',
'apple',
@ -92,6 +93,37 @@ class Example extends React.Component {
})}
</div>
<div className="row-small sets">
Theme: 
<button
disabled={this.state.darkMode == undefined}
onClick={() => {
this.setState({ darkMode: undefined })
}}
>
auto
</button>
<button
disabled={this.state.darkMode == false}
onClick={() => {
this.setState({ darkMode: false })
}}
>
light
</button>
<button
disabled={this.state.darkMode}
onClick={() => {
this.setState({ darkMode: true })
}}
>
dark
</button>
</div>
<div className="row">
<Picker {...this.state} onSelect={console.log} />
</div>