react-dialogger 1.1.0

package/styles/dialog.action.css

@@ -0,0 +1,234 @@
+.ripple-button {
+  border-radius: 4px;
+  padding: 4px 8px;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
+  min-height: 30px;
+  width: auto;
+  transition: width 1s;
+  display: inline-block;
+}
+.ripple-button .ripple {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  display: block;
+  content: "";
+  border-radius: 9999px;
+  opacity: 0.5;
+  animation: 0.9s ease 1 forwards ripple-effect;
+}
+.ripple-button .content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes ripple-effect {
+  0% {
+    transform: scale(1) translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(10) translate3d(0, 0, 0);
+    opacity: 0.375;
+  }
+  100% {
+    transform: scale(35) translate3d(0, 0, 0);
+    opacity: 0;
+  }
+}
+.ripple-button-contained {
+  border: none;
+  box-shadow: 0 0 5px #a8a8a8;
+  color: #fff;
+}
+
+.ripple-button-outlined {
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: 0 0 2px #a8a8a8;
+  background: none !important;
+}
+
+.ripple-button-text {
+  border: none;
+  background: none !important;
+}
+
+.ripple-button-disabled.ripple-button-contained {
+  background-color: #f0f0f0 !important;
+  box-shadow: 0 0 5px #c2c2c2;
+}
+
+.ripple-button-disabled.ripple-button-outlined {
+  border-color: #e6e6e6 !important;
+}
+
+.ripple-button-disabled {
+  color: #acacac !important;
+  cursor: default !important;
+  box-shadow: none;
+}
+
+.ripple-button .content {
+  display: flex;
+  align-items: center;
+  column-gap: 2px;
+}
+
+.ripple-button-primary {
+  background: #1976d2;
+  border-color: #72a5d8;
+}
+
+.ripple-button-primary.ripple-button-outlined, .ripple-button-primary.ripple-button-text {
+  color: #6ea8e2;
+}
+
+.ripple-button-primary.ripple-button-outlined, .ripple-button-primary.ripple-button-text {
+  color: #6ea8e2;
+}
+
+.ripple-button-primary.ripple-button-outlined:hover, .ripple-button-primary.ripple-button-text:hover {
+  color: #5b88b6;
+}
+
+.ripple-button-primary.ripple-button-outlined:active, .ripple-button-primary.ripple-button-text:active {
+  color: #859eb8;
+}
+
+.ripple-button.ripple-button-primary > .ripple {
+  background: #e0e1fd;
+}
+
+.ripple-button-success {
+  background: #35800f;
+  border-color: #6daa4e;
+}
+
+.ripple-button-success.ripple-button-outlined, .ripple-button-success.ripple-button-text {
+  color: #35800f;
+}
+
+.ripple-button-success.ripple-button-outlined:hover, .ripple-button-success.ripple-button-text:hover {
+  color: #35800f;
+}
+
+.ripple-button-success.ripple-button-outlined:active, .ripple-button-success.ripple-button-text:active {
+  color: #35800f;
+}
+
+.ripple-button.ripple-button-success > .ripple {
+  background: #e3ffd9;
+}
+
+.ripple-button-error {
+  background: #c01616;
+  border-color: #d15e5e;
+}
+
+.ripple-button-error.ripple-button-outlined, .ripple-button-error.ripple-button-text {
+  color: #cc2a2a;
+}
+
+.ripple-button-error.ripple-button-outlined:hover, .ripple-button-error.ripple-button-text:hover {
+  color: #c03232;
+}
+
+.ripple-button-error.ripple-button-outlined:active, .ripple-button-error.ripple-button-text:active {
+  color: #c02424;
+}
+
+.ripple-button.ripple-button-error > .ripple {
+  background: #ffd9d9;
+}
+
+.ripple-button-warning {
+  background: #b5ac01;
+  border-color: #978f01;
+}
+
+.ripple-button-warning.ripple-button-outlined, .ripple-button-warning.ripple-button-text {
+  color: #b5ac01;
+}
+
+.ripple-button-warning.ripple-button-outlined:hover, .ripple-button-warning.ripple-button-text:hover {
+  color: #a09a00;
+}
+
+.ripple-button-warning.ripple-button-outlined:active, .ripple-button-warning.ripple-button-text:active {
+  color: #847d00;
+}
+
+.ripple-button.ripple-button-warning > .ripple {
+  background: #fffcd9;
+}
+
+.ripple-button-info {
+  background: #69b8e1;
+  border-color: #5898b9;
+}
+
+.ripple-button-info.ripple-button-outlined, .ripple-button-info.ripple-button-text {
+  color: #69b8e1;
+}
+
+.ripple-button-info.ripple-button-outlined:hover, .ripple-button-info.ripple-button-text:hover {
+  color: #69b8e1;
+}
+
+.ripple-button-info.ripple-button-outlined:active, .ripple-button-info.ripple-button-text:active {
+  color: #79bee1;
+}
+
+.ripple-button.ripple-button-info > .ripple {
+  background: #fffcd9;
+}
+
+.ripple-button-secondary {
+  background: #a769e1;
+  border-color: #8758b9;
+}
+
+.ripple-button-secondary.ripple-button-outlined, .ripple-button-secondary.ripple-button-text {
+  color: #a769e1;
+}
+
+.ripple-button-secondary.ripple-button-outlined:hover, .ripple-button-secondary.ripple-button-text:hover {
+  color: #a369e1;
+}
+
+.ripple-button-secondary.ripple-button-outlined:active, .ripple-button-secondary.ripple-button-text:active {
+  color: #c479e1;
+}
+
+.ripple-button.ripple-button-secondary > .ripple {
+  background: #f2d9ff;
+}
+
+.ripple-button-default {
+  background: #ffffff;
+  border-color: #3a3a3a;
+}
+
+.ripple-button-default.ripple-button-contained, .ripple-button-default.ripple-button-text, .ripple-button-default.ripple-button-outlined {
+  color: #5f5f5f;
+}
+
+.ripple-button-default.ripple-button-outlined:hover, .ripple-button-default.ripple-button-text:hover {
+  color: #797979;
+}
+
+.ripple-button-default.ripple-button-outlined:active, .ripple-button-default.ripple-button-text:active {
+  color: #b7b7b7;
+}
+
+.ripple-button.ripple-button-default > .ripple {
+  background: #ffffff;
+}

package/styles/dialog.css

@@ -0,0 +1,336 @@
+@charset "UTF-8";
+@keyframes pos-in-flex-start {
+  from {
+    margin-top: -50px;
+    opacity: 0;
+  }
+  to {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+@keyframes pos-out-flex-start {
+  from {
+    margin-top: 0;
+    opacity: 1;
+  }
+  to {
+    margin-top: -50px;
+    opacity: 0;
+  }
+}
+/*@keyframes pos-in-flex-end {from {bottom: -1000px; opacity: 0}to {bottom: 40px; opacity: 1;}}*/
+@keyframes pos-in-flex-end {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+/*@keyframes pos-out-flex-end {from {bottom: 40px; opacity: 1} to {bottom: -1000px; opacity: 0;}}*/
+@keyframes pos-out-flex-end {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+.show-position-flex-start {
+  /*animation: pos-in-flex-start .3s;*/
+  position: absolute;
+  top: 40px;
+  animation: pos-in-flex-start 0.3s forwards;
+}
+
+.hide-position-flex-start {
+  /*animation: pos-out-flex-start .3s;*/
+  position: absolute;
+  top: 40px;
+  animation-fill-mode: forwards;
+  animation: pos-out-flex-start 0.3s;
+  transform: translateY(100%); /* Çıkış için ayarlama */
+}
+
+.show-position-flex-end {
+  position: absolute;
+  bottom: 40px;
+  animation: pos-in-flex-end 0.3s forwards;
+}
+
+.hide-position-flex-end {
+  position: absolute;
+  bottom: 40px;
+  animation: pos-out-flex-end 0.3s;
+  transform: translateY(100%); /* Çıkış için ayarlama */
+  animation-fill-mode: forwards;
+}
+
+@keyframes backdrop-show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes backdrop-hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.dialog-backdrop-show {
+  animation: backdrop-show 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.dialog-backdrop-hide {
+  animation: backdrop-hide 0.3s;
+  animation-fill-mode: forwards;
+}
+
+@media (width < 500px) {
+  .dialog-width-xs {
+    width: 100%;
+  }
+  .dialog-width-md {
+    width: 100%;
+  }
+}
+@media (width > 500px) and (width < 750px) {
+  .dialog-width-xs {
+    width: 400px;
+  }
+  .dialog-width-sm {
+    width: 600px;
+  }
+  .dialog-width-md {
+    width: 100%;
+  }
+  .dialog-width-lg {
+    width: 100%;
+  }
+  .dialog-width-xl {
+    width: 100%;
+  }
+}
+@media (width > 750px) and (width < 1000px) {
+  .dialog-width-xs {
+    width: 400px;
+  }
+  .dialog-width-sm {
+    width: 600px;
+  }
+  .dialog-width-md {
+    width: 900px;
+  }
+  .dialog-width-lg {
+    width: 100%;
+  }
+  .dialog-width-xl {
+    width: 100%;
+  }
+}
+@media (width > 1000px) and (width < 1500px) {
+  .dialog-width-xs {
+    width: 400px;
+  }
+  .dialog-width-sm {
+    width: 600px;
+  }
+  .dialog-width-md {
+    width: 900px;
+  }
+  .dialog-width-lg {
+    width: 100%;
+  }
+  .dialog-width-xl {
+    width: 1250px;
+  }
+}
+@media (width > 1501px) {
+  .dialog-width-xs {
+    width: 400px;
+  }
+  .dialog-width-sm {
+    width: 600px;
+  }
+  .dialog-width-md {
+    width: 900px;
+  }
+  .dialog-width-lg {
+    width: 1200px;
+  }
+  .dialog-width-xl {
+    width: 100%;
+  }
+}
+.appinsource-dialog-root {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  z-index: 1201;
+}
+
+.dialog-backdrop {
+  background-color: rgba(207, 207, 207, 0.4);
+  padding: 20px;
+  display: flex;
+  /*width: 100%;*/
+  height: 100%;
+}
+
+.drag-handle {
+  cursor: move;
+}
+
+.no-select-on-resize {
+  user-select: none; /* Metin seçimini devre dışı bırakır */
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE/Edge */
+}
+
+.dialog-main {
+  top: 20px;
+  box-shadow: 0 0 20px #252525;
+  border-radius: 10px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  overflow: clip;
+}
+.dialog-main .dialog-header {
+  min-height: 64px;
+  padding: 10px 20px 10px 20px;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
+}
+.dialog-main .dialog-header .header-actions-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+.dialog-main .dialog-header .close-icon-wrapper {
+  cursor: pointer !important;
+}
+.dialog-main .dialog-header .close-icon-wrapper .close-icon {
+  fill: #666666;
+  width: 30px;
+}
+.dialog-main .dialog-header .close-icon-wrapper *:hover {
+  color: #CCCCCC;
+}
+.dialog-main .dialog-header .fullscreen-icon-wrapper {
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  cursor: pointer;
+}
+.dialog-main .dialog-header .fullscreen-icon-wrapper .fullscreen-icon, .dialog-main .dialog-header .fullscreen-icon-wrapper .fullscreen-exit-icon {
+  fill: #286e94;
+  width: 30px;
+}
+.dialog-main .dialog-body {
+  display: flex;
+  position: relative;
+  padding: 10px 20px 10px 20px;
+  overflow: auto;
+  flex-direction: column;
+}
+.dialog-main .dialog-body .dialog-content-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+.dialog-main .dialog-footer {
+  min-height: 64px;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.2);
+  padding: 10px 20px 10px 20px;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+.dialog-main .resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  /*background: repeating-linear-gradient(
+                  45deg,
+                  #ccc,
+                  #ccc 2px,
+                  transparent 2px,
+                  transparent 4px
+  );*/
+  bottom: 0;
+  right: 0;
+  cursor: se-resize; /* Sağ alt köşe için özel imleç */
+}
+.dialog-main .resizable-handle .resizable-handle-icon svg {
+  transform: rotate(-135deg);
+  display: flex;
+  fill: #286e94;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+.fullscreen {
+  -webkit-transform: inherit !important;
+  -moz-transform: inherit !important;
+  -o-transform: inherit !important;
+  transform: inherit !important;
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  border-radius: 0 !important;
+}
+
+.no-user-select {
+  user-select: none;
+}
+
+/* Scrollbar genişliği */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 8px;
+}
+
+/* Scrollbar arka planı */
+::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  /* border-radius: 10px;*/
+}
+
+/* Scrollbarın kendisi */
+::-webkit-scrollbar-thumb {
+  background: #b4b4b4;
+  border-radius: 10px;
+}
+
+/* Scrollbar üzerine gelindiğinde */
+::-webkit-scrollbar-thumb:hover {
+  background: #40abff;
+}

package/types/DialogActionTypes.d.ts

@@ -0,0 +1,66 @@
+import { DialogAction } from "../models/DialogAction";
+import { IDialogDef, IListenerDialogDef, IStateDef } from "./DialogTypes";
+import { TValues, ICoords } from "./types";
+import DialogBase from "../components/DialogBase";
+import DialogActionBase from "../components/DialogActionBase";
+import { CSSProperties } from "react";
+import * as React from "react";
+export type ActionDialogDef = Omit<IDialogDef, 'switchFullScreen'>;
+export type ActionDef = Pick<DialogAction, 'onClick' | 'setInProcess' | 'getLabel' | 'getColor' | 'getVariant' | 'isDisabled' | 'setOptions' | 'state' | 'isInProcess' | 'setLabel' | 'name'>;
+export type ActionBaseDef = Pick<DialogActionBase, 'setOptions' | 'setInProcess' | 'getLabel' | 'options' | 'click' | 'remove'>;
+export interface IDialogActionDef extends ActionBaseDef {
+}
+export type DialogActionType = (button: ActionBaseDef, dialog: Omit<IDialogDef, 'switchFullScreen'>) => void;
+export interface ActionProps {
+    name: string;
+    options?: DialogActionOptionsType;
+    /**
+     * @deprecated
+     * @see options.label */
+    label?: string;
+    onClick: DialogActionType;
+    dialogBaseComponent: DialogBase;
+    /**
+     * @deprecated
+     * @see options.variant */
+    variant?: TBVariant;
+    /**
+     * @deprecated
+     * @see options.color */
+    color?: TBColor;
+    /**
+     * @deprecated
+     * */
+    onLoad?: (button: DialogActionBase) => void;
+    /**
+     * @deprecated
+     * */
+    onUpdate?: (button: DialogActionBase) => void;
+    inProcess?: boolean;
+    /**
+     * @deprecated
+     * @see options.disabled */
+    disabled?: boolean;
+    style?: CSSProperties;
+    baseStyle?: CSSProperties;
+    fontFamily?: string;
+    stateListener?: TDialogStateListenerForActionCallbackType;
+}
+export interface ActionState {
+    isRippling: boolean;
+    coords: ICoords;
+}
+export type TBVariant = "contained" | "outlined" | "text";
+export type TBColor = "primary" | "success" | "error" | "warning" | "info" | "secondary" | "default";
+export type DialogActionOptionsType = {
+    label?: string;
+    variant?: TBVariant;
+    color?: TBColor;
+    disabled?: boolean;
+    prevDisabled?: boolean;
+    style?: React.CSSProperties;
+    baseStyle?: React.CSSProperties;
+};
+type TListenerButtonType = Pick<DialogActionBase, Exclude<keyof ActionDef, 'onClick' | 'getStateListener' | 'name'>>;
+export type TDialogStateListenerForActionCallbackType = (state: IStateDef, values: TValues, button: TListenerButtonType, dialog: IListenerDialogDef) => void;
+export {};

package/types/DialogActionTypes.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+;