extracted-chat-components v1.6.0-45
Common chat elements
Module description
This module includes shared React components and constant values like pure constants and enums. React components consist of:
- PopUpNotification - the component responsible for almost all modal windows in the project, for example it is invoked when user trying to end chat
- IncomingChatRequestPsychic - the component responsible for the modal window that Psychic sees when getting chat request
- InteractChatButton - the button that used in PopUpNotification component and almost in all other application components
How to use module
- Allow project
sass
loader to load styles from this module
path.resolve(__dirname, 'node_modules/extracted-chat-components')
- Use it in your project
export * from 'extracted-chat-components/enums';
import { PopUpNotification } from 'extracted-chat-components';
Deep dive into components
Module components
PopUpNotification component props:
- isOpen -
Boolean
. Can be true or false and responsible for showing or hiding modal window - title -
String
. Often the main text on the modal window - acceptButton and rejectButton? -
Object
. These parameters take the next object:
{
// Button text
text: string,
// ButtonColor is an enum see "Mandatory enums" section
color?: ButtonColor,
// ButtonSize is an enum see "Mandatory enums" section
size?: ButtonSize,
// ButtonShape is an enum see "Mandatory enums" section
shape?: ButtonShape,
// Handler that will invoke on button click
handler: (object?: any) => void,
}
- description? -
String
. Provides additional description if needed. - isBigWidth? -
Boolean
. If true, the width will be equals to 500px else to 350px
IncomingChatRequestPsychic component props:
- tens -
String
. First part of the time at the modal timer. - units -
String
. Second part of the time at the modal timer. - isShownIncomingRequest -
Boolean
. Can be true or false and responsible for showing or hiding modal window - handleAccept -
Function
. Process the click on 'Accept Button' - name -
String
. Customer name - dateOfBirth -
String
. Customer date of birth 'DOB: ...' format - horoSign -
String
. Customer zodiac sign - lastReading -
String
. Customer last reading
InteractChatButton component props:
- isActive? -
Boolean
. Applies styles to active or inactive button - isBold? -
Boolean
. Applies font weight styles - text -
String
. Component text - onClick -
Function
. Handle click on button - color - ButtonColor. Applies color theme to component
- size - ButtonSize. Applies size styles to component
- shape - ButtonShape. Applies shape styles to component
Mandatory enums
ButtonColor
Colors that next scss
mixin gets depend on ButtonColor
@mixin apply-colors($color, $background-color) {
color: $color;
background-color: $background-color;
}
Additionally, outline values (LIGHT_OUTLINE, WARNING_OUTLINE, WHITE_OUTLINE) add border to the button
enum ButtonColor {
// @include apply-colors(#ffffff, $red);
DANGER = 'danger',
// @include apply-colors(#ffffff, $orange);
WARNING = 'warning',
// @include apply-colors($text, #ffffff);
LIGHT_OUTLINE = 'lightOutline',
// @include apply-colors($orange, #ffffff);
WARNING_OUTLINE = 'warningOutline',
// @include apply-colors($white, transparent);
WHITE_OUTLINE = 'whiteOutline',
// @include apply-colors(#a9a9b5, #eff1f5);
DISABLE = 'disable',
}
ButtonSize
Values that next scss
mixin gets depend on ButtonSize
@mixin apply-size($font-size, $line-height, $width, $height) {
@include apply-font($font-size, $line-height);
width: $width;
height: $height;
}
enum ButtonSize {
// @include apply-size($font-size: 20px, $line-height: 27px, $width: 307px, $height: 50px);
E = 'extreme',
// @include apply-size($font-size: 16px, $line-height: 22px, $width: 200px, $height: 50px);
M = 'medium',
// @include apply-size($font-size: 16px, $line-height: 22px, $width: 270px, $height: 50px);
L = 'large',
// @include apply-size($font-size: 14px, $line-height: 22px, $width: 174px, $height: 40px);
S = 'small',
}
ButtonShape
This enum
affects the value of the border-radius
enum ButtonShape {
// If ButtonSize.S => border-radius: 40px otherwise border-radius: 50px
ROUNDED = 'rounded',
// border-radius: 12 px
RECTANGULAR = 'rectangular',
}
Available Scripts
In the project directory, you can run:
npm run build
Builds application and put sources to the dist package
10 days ago
10 days ago
2 months ago
7 months ago
8 months ago
7 months ago
8 months ago
11 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago