@emotion/core#keyframes JavaScript Examples
The following examples show how to use
@emotion/core#keyframes.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Record.js From aws-amplify-quick-notes with MIT No Attribution | 6 votes |
|
pulse = keyframes`
0% {
transform: scale(1);
opacity: 0.3;
}
100% {
transform: scale(2);
opacity: 0;
}
`
Example #2
| Source File: Tabs.js From react-emotion-multi-step-form with MIT License | 6 votes |
|
IconTabWrapper = styled.div`
flex: ${props => props.isSubmitPage ? 'none' : '1 1 auto'};
min-width: ${props => props.isSubmitPage ? '50px' : '40px'};
line-height: 0;
${props => css`
transform-origin: right top;
animation-name: ${keyframes(props.inverseScaleAnimation)};
animation-duration: 400ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
`}
`
Example #3
| Source File: Tabs.js From react-emotion-multi-step-form with MIT License | 6 votes |
|
TabsContainer = styled.div`
margin: 0 auto;
display: flex;
justify-content: flex-end;
max-width: ${props => props.basePageWidth}px;
line-height: 30px;
${props => css`
transform-origin: center top;
animation-name: ${keyframes(props.scaleAnimation)};
animation-duration: 400ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
`}
`
Example #4
| Source File: FormBody.js From react-emotion-multi-step-form with MIT License | 6 votes |
|
PageWrapper = styled.div`
padding: 10px 0;
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: flex-start;
${props => css`
transform-origin: left top;
animation-name: ${keyframes(props.inverseScaleAnimation)};
animation-duration: 400ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
`}
&:focus {
outline: none;
}
${props => props.isSubmitPage ? css`
width: ${props.submitWidth}px;
height: 40px;
border-radius: 5px;
padding: 10px 3px;
z-index: 1;
cursor: pointer;
&:focus {
border: 2px solid ${props.theme.colors.light.indigo};
padding: 8px 1px;
}
div {
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
&:focus > button > div, &:hover > button > div {
animation: ${bounceRight} .8s ease-in-out infinite;
}
}
` : `
`}
`
Example #5
| Source File: FormBody.js From react-emotion-multi-step-form with MIT License | 6 votes |
|
PageContainer = styled.div`
margin: 0px auto;
max-width: 500px;
height: 60px;
${props => `
border-bottom-left-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
border-bottom-right-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
${props.isSubmitPage ? `
border-top-left-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
border-top-right-radius: ${5 / props.widthScale}px ${5 / props.heightScale}px;
` : `
`}
`}
overflow: hidden;
background-color: hsl(0, 0%, 100%);
${props => props.isError ? css`
box-shadow: 0 ${5 / props.heightScale}px ${5 / props.heightScale}px hsla(16, 100%, 40%, .8);
` : `
box-shadow: 0 ${5 / props.heightScale}px ${5 / props.heightScale}px hsla(120, 60%, 40%, .8);
`}
${props => css`
transform-origin: center top;
animation-name: ${keyframes(props.scaleAnimation)};
animation-duration: 400ms;
animation-timing-function: linear;
animation-fill-mode: forwards;
`}
`
Example #6
| Source File: FormBody.js From react-emotion-multi-step-form with MIT License | 6 votes |
|
bounceRight = keyframes`
0%,
100% {
transform: translate(-8px, -1px);
}
50% {
transform: translate(-2px, -1px);
}
`
Example #7
| Source File: FormBody.js From react-emotion-multi-step-form with MIT License | 6 votes |
|
headShake = keyframes`
0% {
transform: translateX(0)
}
12.5% {
transform: translateX(6px) rotateY(9deg)
}
37.5% {
transform: translateX(-5px) rotateY(-7deg)
}
62.5% {
transform: translateX(3px) rotateY(5deg)
}
87.5% {
transform: translateX(-2px) rotateY(-3deg)
}
100% {
transform: translateX(0)
}
`
Example #8
| Source File: styles.js From thekusuma with MIT License | 6 votes |
|
radarAnimation = keyframes`
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 30px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
`
Example #9
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 6 votes |
|
render() {
if (!this.state.type.trim().length || !this.state.message.trim().length) {
return null;
}
const messageClassName = `toast__message message-${CometChatToastNotification.types[this.state.type]}`;
const iconClassName = `toast__icon icon-${CometChatToastNotification.types[this.state.type]}`;
let toastIcon = (this.state.icon.trim().length) ? (
<div css={notificationIconStyle()} className={iconClassName}>
<i css={iconStyle(this.state.icon, this.props.theme)} title={Translator.translate("CLOSE", this.props.lang)}></i>
</div>
) : null;
return (
<div css={notificationContainerStyle(this.props, keyframes)} className="toast__notification">
<div css={notificationStyle(this.props, this.state)} className="toast__container">
{toastIcon}
<div css={notificationMessageContainerStyle()} className={messageClassName}>
<p css={notificationMessageStyle()}>{Translator.translate(this.state.message, this.props.lang)}</p>
</div>
<button css={notificationCloseButtonStyle()} type="button" onClick={this.deleteToast} className="toast__close">
<i css={iconStyle(closeIcon, this.props.theme)} title={Translator.translate("CLOSE", this.props.lang)}></i>
</button>
</div>
</div>
);
}
Example #10
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 6 votes |
|
CometChatSmartReplyPreview = (props) => {
const context = useContext(CometChatContext);
const options = props.options.map((option, key) => {
return (<div key={key} css={previewOptionStyle(context)} className="option" onClick={() => props.clicked(option)}>{option}</div>)
})
return (
<div css={previewWrapperStyle(context, keyframes)} className="reply__preview__wrapper">
<div css={previewHeadingStyle()} className="preview__heading">
<div css={previewCloseStyle(closeIcon, context)} onClick={props.close} className="preview__close"></div>
</div>
<div css={previewOptionsWrapperStyle()} className="preview__options">{options}</div>
</div>
)
}
Example #11
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 6 votes |
|
render() {
let callScreen = null, errorScreen = null;
if (this.state.callInProgress) {
let avatar = (<CometChatAvatar user={this.state.callInProgress.receiver} />);
if (this.state.errorScreen) {
errorScreen = (
<div css={errorContainerStyle()} className="callscreen__error__wrapper"><div>{this.state.errorMessage}</div></div>
);
}
if (this.state.outgoingCallScreen) {
callScreen = (
<div css={callScreenWrapperStyle(this.props, keyframes)} className="callscreen__wrapper" ref={el => { this.callScreenFrame = el; }}>
<div css={callScreenContainerStyle()} className="callscreen__container">
<div css={headerStyle()} className="callscreen__header">
<span css={headerDurationStyle()} className="header__calling">{Translator.translate("CALLING", this.props.lang)}</span>
<h6 css={headerNameStyle()} className="header__name">{this.state.callInProgress.receiver.name}</h6>
</div>
<div css={thumbnailWrapperStyle()} className="callscreen__thumbnail__wrapper">
<div css={thumbnailStyle()} className="callscreen__thumbnail">{avatar}</div>
</div>
{errorScreen}
<div css={headerIconStyle()} className="callscreen__icons">
<div css={iconWrapperStyle()} className="icon__block" onClick={this.cancelCall}>
<div css={iconStyle(callIcon)} className="icon icon__end"><i></i></div>
</div>
</div>
</div>
</div>
);
} else {
callScreen = <CometChatCallScreen loggedInUser={this.loggedInUser} call={this.state.callInProgress} lang={this.props.lang} actionGenerated={this.actionHandler} />;
}
}
return callScreen;
}
Example #12
| Source File: blockquote.js From stoic-quotes with MIT License | 6 votes |
|
fadeIn = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
Example #13
| Source File: blockquote.js From stoic-quotes with MIT License | 6 votes |
|
fadeOut = keyframes`
0% {
opacity: 1;
}
100% {
opacity: 0;
}
`
Example #14
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 6 votes |
|
render() {
const resizeText = Translator.translate("RESIZE", this.props.lang);
let iconView = (<i css={iconStyle(minimizeIcon)} title={resizeText}></i>);
if (this.state.maximized === false) {
iconView = (<i css={iconStyle(maximizeIcon)} title={resizeText}></i>);
}
return (
<React.Fragment>
<div css={callScreenBackgroundStyle(this.state)} ref={this.callScreenBackgroundEl}></div>
<div ref={this.callScreenEl} className="callscreen__container" css={callScreenContainerStyle(this.props)}
style={{ top: this.state.y + "px", left: this.state.x + "px" }}>
<div css={callScreenInnerBackgroundStyle()} ref={this.callScreenInnerBackgroundEl}></div>
<div css={callScreenHeaderStyle(this.state)} className="callscreen__header" onMouseDown={this.enableDragging}>
<div css={headerTitleStyle()}> </div>
<div className="callscreen__resize" css={headerButtonStyle()} onClick={this.toggle} onMouseDown={e => e.stopPropagation()}><button type="button" title={resizeText}>{iconView}</button></div>
</div>
<div css={callScreenWrapperStyle(this.props, keyframes)} className="callscreen__wrapper" ref={el => { this.callScreenFrame = el; }}></div>
<div css={callScreenResizerStyle(this.state)} className="callscreen__resizer-both" onMouseDown={this.initResize}></div>
</div>
</React.Fragment>
)
}
Example #15
| Source File: styles.js From thekusuma with MIT License | 5 votes |
|
animation = keyframes`
0% { right: -300px; opacity: 0;}
50% { right: 50px; opacity: 0.5;}
100% {right: 0px; opacity: 1;};
`
Example #16
| Source File: click-icon.js From stoic-quotes with MIT License | 5 votes |
|
flash = keyframes`
0% { opacity: 0; }
50% { opacity: 0.6; }
100% { opacity: 0; }
`
Example #17
| Source File: global-style.js From stoic-quotes with MIT License | 5 votes |
|
backgroundShift = keyframes`
0% { background-position: 100%, 0% 50%; }
50% { background-position: 100%, 100% 50%; }
100% { background-position: 100%, 0% 50%; }
`
Example #18
| Source File: 404.js From cardano-documentation with MIT License | 5 votes |
|
glitchAnim = keyframes`
0% {
clip: rect(105px, 9999px, 120px, 0);
}
4.166666666666666% {
clip: rect(64px, 9999px, 110px, 0);
}
8.333333333333332% {
clip: rect(23px, 9999px, 49px, 0);
}
12.5% {
clip: rect(104px, 9999px, 5px, 0);
}
16.666666666666664% {
clip: rect(142px, 9999px, 37px, 0);
}
20.833333333333336% {
clip: rect(7px, 9999px, 92px, 0);
}
25% {
clip: rect(127px, 9999px, 55px, 0);
}
29.166666666666668% {
clip: rect(16px, 9999px, 132px, 0);
}
33.33333333333333% {
clip: rect(136px, 9999px, 119px, 0);
}
37.5% {
clip: rect(0px, 9999px, 92px, 0);
}
41.66666666666667% {
clip: rect(83px, 9999px, 134px, 0);
}
45.83333333333333% {
clip: rect(92px, 9999px, 124px, 0);
}
50% {
clip: rect(114px, 9999px, 150px, 0);
}
54.166666666666664% {
clip: rect(5px, 9999px, 110px, 0);
}
58.333333333333336% {
clip: rect(79px, 9999px, 30px, 0);
}
62.5% {
clip: rect(124px, 9999px, 28px, 0);
}
66.66666666666666% {
clip: rect(90px, 9999px, 127px, 0);
}
70.83333333333334% {
clip: rect(131px, 9999px, 127px, 0);
}
75% {
clip: rect(34px, 9999px, 35px, 0);
}
79.16666666666666% {
clip: rect(46px, 9999px, 118px, 0);
}
83.33333333333334% {
clip: rect(106px, 9999px, 56px, 0);
}
87.5% {
clip: rect(35px, 9999px, 138px, 0);
}
91.66666666666666% {
clip: rect(84px, 9999px, 67px, 0);
}
95.83333333333334% {
clip: rect(72px, 9999px, 86px, 0);
}
100% {
clip: rect(143px, 9999px, 132px, 0);
}
`
Example #19
| Source File: styles.js From thekusuma with MIT License | 5 votes |
|
animationLeft = keyframes`
0% { left: -300px; opacity: 0;}
50% { left: 50px; opacity: 0.5;}
100% {left: 0px; opacity: 1;};
`
Example #20
| Source File: styles.js From thekusuma with MIT License | 5 votes |
|
upAndDownAnimation = keyframes`
0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
`
Example #21
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 5 votes |
|
render() {
let callScreen = null,
incomingCallAlert = null;
if (this.state.incomingCall) {
let callType = (
<React.Fragment>
<i css={callIconStyle(audioCallIcon, this.context)} title={Translator.translate("INCOMING_AUDIO_CALL", this.props.lang)}></i>
<span>{Translator.translate("INCOMING_AUDIO_CALL", this.props.lang)}</span>
</React.Fragment>
);
if (this.state.incomingCall.type === CometChat.CALL_TYPE.VIDEO) {
callType = (
<React.Fragment>
<i css={callIconStyle(videoCallIcon, this.context)} title={Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}></i>
<span>{Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}</span>
</React.Fragment>
);
}
incomingCallAlert = (
<div css={incomingCallWrapperStyle(this.props, keyframes)} className="callalert__wrapper">
<div css={callContainerStyle()} className="callalert__container">
<div css={headerWrapperStyle()} className="callalert__header">
<div css={callDetailStyle()} className="header__detail">
<div css={nameStyle()} className="name">
{this.state.incomingCall.sender.name}
</div>
<div css={callTypeStyle(this.props)} className="calltype">
{callType}
</div>
</div>
<div css={thumbnailStyle()} className="header__thumbnail">
<CometChatAvatar user={this.state.incomingCall.sender} />
</div>
</div>
<div css={headerButtonStyle()} className="callalert__buttons" ref={this.callButtonRef}>
<button type="button" css={ButtonStyle(this.props, 0)} className="button button__decline" onClick={() => this.rejectCall(this.state.incomingCall, CometChat.CALL_STATUS.REJECTED)}>
{Translator.translate("DECLINE", this.props.lang)}
</button>
<button type="button" css={ButtonStyle(this.props, 1)} className="button button__accept" onClick={this.acceptCall}>
{Translator.translate("ACCEPT", this.props.lang)}
</button>
</div>
</div>
</div>
);
}
if (this.state.callInProgress) {
callScreen = <CometChatCallScreen loggedInUser={this.loggedInUser} call={this.state.callInProgress} lang={this.props.lang} actionGenerated={this.actionHandler} />;
}
return (
<React.Fragment>
{incomingCallAlert}
{callScreen}
</React.Fragment>
);
}
Example #22
| Source File: index.js From here-covid-19-tracker with MIT License | 5 votes |
|
blink = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
Example #23
| Source File: index.js From here-covid-19-tracker with MIT License | 5 votes |
|
rotate = keyframes`
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359.999deg);
}
`
Example #24
| Source File: index.js From here-covid-19-tracker with MIT License | 5 votes |
|
blink = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`
Example #25
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 5 votes |
|
render() {
let callScreen = null,
incomingCallAlert = null;
if (this.state.incomingCall) {
let avatar = (
<div css={thumbnailStyle()} className="header__thumbnail">
<CometChatAvatar cornerRadius="50%" image={this.state.incomingCall.sender.avatar} />
</div>
);
const callType = (
<React.Fragment>
<i css={callIconStyle(videoCallIcon, this.context)} title={Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}></i>
<span>{Translator.translate("INCOMING_VIDEO_CALL", this.props.lang)}</span>
</React.Fragment>
);
incomingCallAlert = (
<div css={incomingCallWrapperStyle(this.props, keyframes)} className="callalert__wrapper">
<div css={callContainerStyle()} className="callalert__container">
<div css={headerWrapperStyle()} className="callalert__header">
<div css={callDetailStyle()} className="header__detail">
<div css={nameStyle()} className="name">
{this.state.incomingCall.sender.name}
</div>
<div css={callTypeStyle(this.props)} className="calltype">
{callType}
</div>
</div>
{avatar}
</div>
<div css={headerButtonStyle()} className="callalert__buttons" ref={this.callButtonRef}>
<button type="button" css={ButtonStyle(this.props, 0)} className="button button__ignore" onClick={this.ignoreCall}>
{Translator.translate("IGNORE", this.props.lang)}
</button>
<button type="button" css={ButtonStyle(this.props, 1)} className="button button__join" onClick={this.joinCall}>
{Translator.translate("JOIN", this.props.lang)}
</button>
</div>
</div>
</div>
);
}
if (this.state.callInProgress) {
callScreen = <CometChatCallScreen loggedInUser={this.loggedInUser} call={this.state.callInProgress} lang={this.props.lang} actionGenerated={this.actionHandler} />;
}
return (
<React.Fragment>
{incomingCallAlert}
{callScreen}
</React.Fragment>
);
}
Example #26
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 5 votes |
|
render() {
let messageContainer = null;
if (this.state.activestickerlist.length === 0) {
messageContainer = (
<div css={stickerMsgStyle()} className="stickers__decorator-message">
<p css={stickerMsgTxtStyle(this.context)} className="decorator-message">{this.decoratorMessage}</p>
</div>
);
}
let stickers = null;
if (Object.keys(this.state.stickerset).length) {
const sectionItems = Object.keys(this.state.stickerset).map((sectionItem, key) => {
const stickerSetThumbnail = this.state.stickerset[sectionItem][0]["stickerUrl"];
return( <div key={key} className="stickers__sectionitem" css={sectionListItemStyle()} onClick={() => this.onStickerSetClicked(sectionItem)}>
<img src={stickerSetThumbnail} alt={sectionItem} />
</div>
);
});
let activeStickerList = [];
if (this.state.activestickerlist.length) {
const stickerList = [...this.state.activestickerlist];
activeStickerList = stickerList.map((stickerItem, key) => {
return (
<div key={key} css={stickerItemStyle(this.context)} onClick={() => this.sendStickerMessage(stickerItem)} className="stickers__listitem">
<img src={stickerItem.stickerUrl} alt={stickerItem.stickerName} />
</div>
);
});
}
stickers = (
<React.Fragment>
<div css={stickerCloseStyle(closeIcon, this.context)} className="stickers__close" onClick={this.closeStickerKeyboard}></div>
<div css={stickerListStyle(this.props)} className="stickers__list">
{activeStickerList}
</div>
<div css={stickerSectionListStyle(this.context)} className="stickers__sections">
{sectionItems}
</div>
</React.Fragment>
);
}
return (
<div css={stickerWrapperStyle(this.context, keyframes)} className="stickers">
{messageContainer}
{stickers}
</div>
);
}
Example #27
| Source File: index.js From cometchat-pro-react-ui-kit with MIT License | 4 votes |
|
render() {
let liveReactionBtn = null;
const liveReactionText = Translator.translate("LIVE_REACTION", this.context.language);
if (enums.CONSTANTS["LIVE_REACTIONS"].hasOwnProperty(this.props.reaction)) {
const reactionName = this.props.reaction;
liveReactionBtn = (
<div title={liveReactionText} css={reactionBtnStyle()} className="button__reactions" onClick={this.startLiveReaction}>
<img src={heartIcon} alt={reactionName} />
</div>
);
}
let disabledState = false;
if (this.context.item.blockedByMe) {
disabledState = true;
}
const docText = Translator.translate("ATTACH_FILE", this.context.language);
let docs = (
<div
title={docText}
css={fileItemStyle(docIcon, this.context)}
className="filelist__item item__file"
onClick={() => {
this.openFileDialogue("file");
}}>
<i></i>
<input onChange={this.onFileChange} type="file" id="file" ref={this.fileUploaderRef} />
</div>
);
const videoText = Translator.translate("ATTACH_VIDEO", this.context.language);
const audioText = Translator.translate("ATTACH_AUDIO", this.context.language);
const imageText = Translator.translate("ATTACH_IMAGE", this.context.language);
let avp = (
<React.Fragment>
<div
title={videoText}
css={fileItemStyle(videoIcon, this.context)}
className="filelist__item item__video"
onClick={() => {
this.openFileDialogue("video");
}}>
<i></i>
<input onChange={this.onVideoChange} accept="video/*" type="file" ref={this.videoUploaderRef} />
</div>
<div
title={audioText}
css={fileItemStyle(audioIcon, this.context)}
className="filelist__item item__audio"
onClick={() => {
this.openFileDialogue("audio");
}}>
<i></i>
<input onChange={this.onAudioChange} accept="audio/*" type="file" ref={this.audioUploaderRef} />
</div>
<div
title={imageText}
css={fileItemStyle(imageIcon, this.context)}
className="filelist__item item__image"
onClick={() => {
this.openFileDialogue("image");
}}>
<i></i>
<input onChange={this.onImageChange} accept="image/*" type="file" ref={this.imageUploaderRef} />
</div>
</React.Fragment>
);
const pollText = Translator.translate("CREATE_POLL", this.context.language);
let createPollBtn = (
<div title={pollText} css={fileItemStyle(pollIcon, this.context)} className="filelist__item item__poll" onClick={this.toggleCreatePoll}>
<i></i>
</div>
);
const collaborativeDocText = Translator.translate("COLLABORATE_USING_DOCUMENT", this.context.language);
let collaborativeDocBtn = (
<div title={collaborativeDocText} css={fileItemStyle(documentIcon, this.context)} className="filelist__item item__document" onClick={this.toggleCollaborativeDocument}>
<i></i>
</div>
);
const collaborativeBoardText = Translator.translate("COLLABORATE_USING_WHITEBOARD", this.context.language);
let collaborativeBoardBtn = (
<div title={collaborativeBoardText} css={fileItemStyle(whiteboardIcon, this.context)} className="filelist__item item__whiteboard" onClick={this.toggleCollaborativeBoard}>
<i></i>
</div>
);
const emojiText = Translator.translate("EMOJI", this.context.language);
let emojiBtn = (
<div
title={emojiText}
css={emojiButtonStyle(insertEmoticon, this.context)}
className="button__emoji"
onClick={() => {
this.toggleEmojiPicker();
this.setState({ messageToReact: "" });
}}>
<i></i>
</div>
);
const StickerText = Translator.translate("STICKER", this.context.language);
let stickerBtn = (
<div title={StickerText} css={stickerBtnStyle(stickerIcon, this.context)} className="button__sticker" onClick={this.toggleStickerPicker}>
<i></i>
</div>
);
const sendMessageText = Translator.translate("SEND_MESSAGE", this.context.language);
let sendBtn = (
<div title={sendMessageText} css={sendButtonStyle(sendBlue, this.context)} className="button__send" onClick={this.sendTextMessage}>
<i></i>
</div>
);
//if uploading photos, videos feature is disabled
if (this.state.enablePhotosVideos === false) {
avp = null;
}
//if files upload are disabled for chat widget in dashboard
if (this.state.enableFiles === false) {
docs = null;
}
//if polls feature is disabled
if (this.state.enablePolls === false || this.props.parentMessageId) {
createPollBtn = null;
}
//if collaborative_document are disabled for chat widget in dashboard
if (this.state.enableCollaborativeDocument === false || this.props.parentMessageId) {
collaborativeDocBtn = null;
}
//if collaborative_document are disabled for chat widget in dashboard
if (this.state.enableCollaborativeWhiteboard === false || this.props.parentMessageId) {
collaborativeBoardBtn = null;
}
//if emojis are disabled for chat widget in dashboard
if (this.state.enableEmojis === false) {
emojiBtn = null;
}
//if live reactions is disabled for chat widget in dashboard
if (this.state.enableLiveReaction === false || this.state.messageInput.length || this.props.parentMessageId) {
liveReactionBtn = null;
}
//if stickers is disabled for chat widget in dashboard
if (this.state.enableStickers === false) {
stickerBtn = null;
}
if (!this.state.messageInput.length) {
sendBtn = null;
}
const attachText = Translator.translate("ATTACH", this.context.language);
let attach = (
<div css={stickyAttachmentStyle()} className="input__sticky__attachment">
<div css={stickyAttachButtonStyle(roundedPlus, this.context)} className="attachment__icon" onClick={this.toggleFilePicker} title={attachText}>
<i></i>
</div>
<div css={filePickerStyle(this.state)} className="attachment__filepicker" dir={Translator.getDirection(this.context.language)}>
<div css={fileListStyle()} className="filepicker__filelist">
{avp}
{docs}
{createPollBtn}
{collaborativeDocBtn}
{collaborativeBoardBtn}
</div>
</div>
</div>
);
if (avp === null && docs === null && createPollBtn === null && collaborativeDocBtn === null && collaborativeBoardBtn === null) {
attach = null;
}
let createPoll = null;
if (this.state.createPoll) {
createPoll = <CometChatCreatePoll close={this.closeCreatePoll} actionGenerated={this.actionHandler} />;
}
let editPreview = null;
if (this.state.messageToBeEdited) {
let messageText = this.state.messageToBeEdited.text;
//xss extensions data
const xssData = checkMessageForExtensionsData(this.state.messageToBeEdited, "xss-filter");
if (xssData && xssData.hasOwnProperty("sanitized_text") && xssData.hasOwnProperty("hasXSS") && xssData.hasXSS === "yes") {
messageText = xssData.sanitized_text;
}
//datamasking extensions data
const maskedData = checkMessageForExtensionsData(this.state.messageToBeEdited, "data-masking");
if (maskedData && maskedData.hasOwnProperty("data") && maskedData.data.hasOwnProperty("sensitive_data") && maskedData.data.hasOwnProperty("message_masked") && maskedData.data.sensitive_data === "yes") {
messageText = maskedData.data.message_masked;
}
//profanity extensions data
const profaneData = checkMessageForExtensionsData(this.state.messageToBeEdited, "profanity-filter");
if (profaneData && profaneData.hasOwnProperty("profanity") && profaneData.hasOwnProperty("message_clean") && profaneData.profanity === "yes") {
messageText = profaneData.message_clean;
}
editPreview = (
<div css={editPreviewContainerStyle(this.context, keyframes)}>
<div css={previewHeadingStyle()}>
<div css={previewTextStyle()}>{Translator.translate("EDIT_MESSAGE", this.context.language)}</div>
<span css={previewCloseStyle(closeIcon, this.context)} onClick={this.closeEditPreview}></span>
</div>
<div>{messageText}</div>
</div>
);
}
let smartReplyPreview = null;
if (this.state.replyPreview) {
const message = this.state.replyPreview;
const smartReplyData = checkMessageForExtensionsData(message, "smart-reply");
if (smartReplyData && smartReplyData.hasOwnProperty("error") === false) {
const options = [smartReplyData["reply_positive"], smartReplyData["reply_neutral"], smartReplyData["reply_negative"]];
smartReplyPreview = <CometChatSmartReplyPreview options={options} clicked={this.sendReplyMessage} close={this.clearReplyPreview} />;
}
}
let stickerViewer = null;
if (this.state.stickerViewer) {
stickerViewer = <CometChatStickerKeyboard actionGenerated={this.actionHandler} />;
}
let emojiViewer = null;
if (this.state.emojiViewer) {
emojiViewer = <CometChatEmojiKeyboard emojiClicked={this.emojiClicked} lang={this.context.language} />;
}
return (
<div css={chatComposerStyle(this.context)} className="chat__composer">
{editPreview}
{smartReplyPreview}
{stickerViewer}
{emojiViewer}
<div css={composerInputStyle()} className="composer__input">
<div tabIndex="-1" css={inputInnerStyle(this.props, this.state, this.context)} className="input__inner">
<div
css={messageInputStyle(disabledState)}
className="input__message-input"
contentEditable="true"
placeholder={Translator.translate("ENTER_YOUR_MESSAGE_HERE", this.context.language)}
dir={Translator.getDirection(this.context.language)}
onInput={this.changeHandler}
onBlur={event => this.endTyping(event)}
onKeyDown={this.sendMessageOnEnter}
ref={this.messageInputRef}></div>
<div css={inputStickyStyle(disabledState, attach, this.context)} className="input__sticky">
{attach}
<div css={stickyButtonStyle(this.state)} className="input__sticky__buttons">
{stickerBtn}
{emojiBtn}
{sendBtn}
{liveReactionBtn}
</div>
</div>
</div>
</div>
{createPoll}
</div>
);
}
Example #28
| Source File: 404.js From cardano-documentation with MIT License | 4 votes |
|
glitchAnim2 = keyframes`
6.666666666666667% {
clip: rect(42px, 9999px, 16px, 0);
}
10% {
clip: rect(128px, 9999px, 39px, 0);
}
13.333333333333334% {
clip: rect(74px, 9999px, 139px, 0);
}
16.666666666666664% {
clip: rect(33px, 9999px, 111px, 0);
}
20% {
clip: rect(146px, 9999px, 60px, 0);
}
23.333333333333332% {
clip: rect(25px, 9999px, 64px, 0);
}
26.666666666666668% {
clip: rect(129px, 9999px, 56px, 0);
}
30% {
clip: rect(44px, 9999px, 78px, 0);
}
33.33333333333333% {
clip: rect(91px, 9999px, 105px, 0);
}
36.666666666666664% {
clip: rect(149px, 9999px, 99px, 0);
}
40% {
clip: rect(87px, 9999px, 15px, 0);
}
43.333333333333336% {
clip: rect(56px, 9999px, 25px, 0);
}
46.666666666666664% {
clip: rect(64px, 9999px, 81px, 0);
}
50% {
clip: rect(92px, 9999px, 65px, 0);
}
53.333333333333336% {
clip: rect(52px, 9999px, 41px, 0);
}
56.666666666666664% {
clip: rect(125px, 9999px, 144px, 0);
}
60% {
clip: rect(48px, 9999px, 109px, 0);
}
63.33333333333333% {
clip: rect(69px, 9999px, 13px, 0);
}
66.66666666666666% {
clip: rect(15px, 9999px, 57px, 0);
}
70% {
clip: rect(140px, 9999px, 98px, 0);
}
73.33333333333333% {
clip: rect(143px, 9999px, 44px, 0);
}
76.66666666666667% {
clip: rect(39px, 9999px, 62px, 0);
}
80% {
clip: rect(148px, 9999px, 99px, 0);
}
83.33333333333334% {
clip: rect(90px, 9999px, 119px, 0);
}
86.66666666666667% {
clip: rect(46px, 9999px, 114px, 0);
}
90% {
clip: rect(93px, 9999px, 68px, 0);
}
93.33333333333333% {
clip: rect(16px, 9999px, 22px, 0);
}
96.66666666666667% {
clip: rect(145px, 9999px, 16px, 0);
}
100% {
clip: rect(13px, 9999px, 71px, 0);
}
`
Example #29
| Source File: LoadingIcon.js From basis with MIT License | 4 votes |
|
function LoadingIcon(_props) {
const props = { ...DEFAULT_PROPS, ..._props };
const { size, testId } = props;
const radius = circleRadiusMap[size] ?? 4;
const stepPx = `${3 * radius}px`;
const frames = 12; // 3 circles * 4 steps each
const percantagePerFrame = 100 / frames;
const duration = 3; // sec
/*
circle diameter + space between circles + circle diameter
(2 * radius) + radius + (2 * radius)
*/
const svgSize = 5 * radius;
const start = {
transform: `translate3d(0, 0, 0)`,
};
const right = {
transform: `translate3d(${stepPx}, 0, 0)`,
};
const bottom = {
transform: `translate3d(0, ${stepPx}, 0)`,
};
const left = {
transform: `translate3d(-${stepPx}, 0, 0)`,
};
const up = {
transform: `translate3d(0, -${stepPx}, 0)`,
};
const rightAndBottom = {
transform: `translate3d(${stepPx}, ${stepPx}, 0)`,
};
const upAndRight = {
transform: `translate3d(${stepPx}, -${stepPx}, 0)`,
};
const leftAndUp = {
transform: `translate3d(-${stepPx}, -${stepPx}, 0)`,
};
const getKeyframes = (steps) =>
keyframes(
steps.reduce((acc, step, index) => {
acc[`${index * percantagePerFrame}%`] = step;
return acc;
}, {})
);
const svgCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
color: ({ color }, theme) => {
return {
fill: theme.getColor(color) ?? theme.colors.black,
};
},
});
const circleCSS = [
getKeyframes([
start,
right,
right,
right,
rightAndBottom,
rightAndBottom,
rightAndBottom,
bottom,
bottom,
bottom,
start,
start,
]),
getKeyframes([
start,
start,
up,
up,
up,
upAndRight,
upAndRight,
upAndRight,
right,
right,
right,
start,
]),
getKeyframes([
start,
start,
start,
left,
left,
left,
leftAndUp,
leftAndUp,
leftAndUp,
up,
up,
up,
]),
].map((animation) => ({
animation: `${animation} ${duration}s ease infinite`,
}));
return (
<svg
css={svgCSS}
width={svgSize}
height={svgSize}
viewBox={`0 0 ${svgSize} ${svgSize}`}
focusable="false"
role="img"
aria-label="Loading icon"
data-testid={testId}
>
<circle cx={radius} cy={radius} r={radius} css={circleCSS[0]} />
<circle cx={radius} cy={4 * radius} r={radius} css={circleCSS[1]} />
<circle cx={4 * radius} cy={4 * radius} r={radius} css={circleCSS[2]} />
</svg>
);
}
