@majoo-ui/react 1.53.1 → 1.54.0

package/components/index.d.ts

@@ -46,3 +46,4 @@ export * from './chart';
 export * from './checkboxTable';
 export * from './contentEditor';
 export * from './contextMenu';
+export * from './skeleton';

package/components/loadingBar/LoadingBar.d.ts

@@ -4,7 +4,7 @@ interface LoadingBarProps {
     /**
      * To set the completion percentage.
      */
-    progress: number;
+    progress?: number;
     /**
      * Additional description under progress.
      */
@@ -18,25 +18,23 @@ interface LoadingBarProps {
      */
     showProgressOnly?: boolean;
     /**
-     * To make the loading bar automatically display the static percentage.
-     */
-    isAuto?: boolean;
-    /**
-     * To show and hide percentage when condition `isAuto`.
+     * To show and hide percentage when condition auto.
      */
     show?: boolean;
     /**
-     * Event callback when percentage is 100% and condition `isAuto`.
+     * Event callback when percentage is 100%.
      */
     onCompleted?: React.ChangeEventHandler;
+    /**
+     * Change Indicator colors.
+     */
+    colors?: string[];
 }
 declare function LoadingBar(props: LoadingBarProps): JSX.Element;
 declare namespace LoadingBar {
     var defaultProps: {
         showProgressOnly: boolean;
-        isAuto: boolean;
         show: boolean;
-        progress: number;
         description: string;
     };
 }

package/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './styles.css';
+export default function Skeleton(): JSX.Element;

package/components/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton';

package/index.esm.css

@@ -1,3 +1,59 @@
+@-webkit-keyframes react-loading-skeleton {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes react-loading-skeleton {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.react-loading-skeleton {
+  --base-color: #ebebeb;
+  --highlight-color: #f5f5f5;
+  --animation-duration: 1.5s;
+  --animation-direction: normal;
+  --pseudo-element-display: block; /* Enable animation */
+
+  background-color: var(--base-color);
+
+  width: 100%;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  line-height: 1;
+
+  position: relative;
+  overflow: hidden;
+  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */
+}
+
+.react-loading-skeleton::after {
+  content: ' ';
+  display: var(--pseudo-element-display);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(90deg, var(--base-color), var(--highlight-color), var(--base-color));
+  transform: translateX(-100%);
+
+  -webkit-animation-name: react-loading-skeleton;
+
+          animation-name: react-loading-skeleton;
+  -webkit-animation-direction: var(--animation-direction);
+          animation-direction: var(--animation-direction);
+  -webkit-animation-duration: var(--animation-duration);
+          animation-duration: var(--animation-duration);
+  -webkit-animation-timing-function: ease-in-out;
+          animation-timing-function: ease-in-out;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+}
+
 .ReactCrop {
   position: relative;
   display: inline-block;