@antscorp/antsomi-ui 1.3.3-beta.18 → 1.3.3-beta.19

package/es/components/atoms/{RateContinuous/RateContinuous.d.ts → RateV2/RateV2.d.ts}

@@ -3,12 +3,16 @@ interface RateContinuousProps {
     count?: number;
     className?: string;
     defaultValue?: number;
+    /**
+     * @description number of star
+     */
     value?: number;
+    type?: 'full' | 'half' | 'continuous';
     /**
      * @param value current number of stars are selected
      * @description number of stars = fillWidth / STAR_WIDTH
      */
     onChange?: (value: number) => void;
 }
-export declare const RateContinuous: React.FC<RateContinuousProps>;
+export declare const RateV2: React.FC<RateContinuousProps>;
 export {};

package/es/components/atoms/{RateContinuous/RateContinuous.js → RateV2/RateV2.js}

@@ -1,16 +1,38 @@
 import React, { useEffect, useState } from 'react';
 import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
-const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
 const STAR_WIDTH = 30;
-export const RateContinuous = ({ count = 5, className, defaultValue = 0, value, onChange, }) => {
+const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
+const roundHalf = (num) => {
+    const multiplier = 1 / 0.5;
+    return Math.round(num * multiplier) / multiplier;
+};
+/**
+ *
+ * @param width width measure from the left edge of star container
+ * @param type type of star - 'full' | 'half' | 'continuous'
+ * @default type 'full'
+ * @returns
+ */
+const getWidth = (width, type = 'full') => {
+    const numberOfStar = width / STAR_WIDTH;
+    return type === 'full'
+        ? Math.ceil(numberOfStar) * STAR_WIDTH
+        : type === 'half'
+            ? roundHalf(numberOfStar) * STAR_WIDTH
+            : width;
+};
+export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = 'full', onChange, }) => {
     const fullWidth = count * STAR_WIDTH;
-    const [fillWidth, setFillWidth] = useState(0);
+    // The width is calculated when move mouse => change the UI, not change the real value
+    const [fillWidth, setFillWidth] = useState(() => defaultValue ? getWidth(defaultValue * STAR_WIDTH, type) : 0);
+    // The real current value that will be return to parent component by onChange function
     // currWidth = value * STAR_WIDTH
-    const [currWidth, setCurrWidth] = useState(() => value ? value * STAR_WIDTH : defaultValue ? defaultValue * STAR_WIDTH : 0);
+    const [currWidth, setCurrWidth] = useState(0);
     const handleMouseMove = e => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
-        setFillWidth(Math.round(x));
+        const hoverWidth = Math.round(x);
+        setFillWidth(getWidth(hoverWidth, type));
     };
     const handleClick = () => {
         // If have no value => auto set current value; if have value => must control value with onChange props
@@ -21,8 +43,9 @@ export const RateContinuous = ({ count = 5, className, defaultValue = 0, value,
     };
     useEffect(() => {
         if (typeof value === 'number') {
-            setCurrWidth(value * STAR_WIDTH);
-            setFillWidth(value * STAR_WIDTH);
+            const width = getWidth(value * STAR_WIDTH, type);
+            setCurrWidth(width);
+            setFillWidth(width);
         }
     }, [value]);
     return (React.createElement("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: { position: 'relative', width: `${fullWidth}px`, backgroundPosition: '-27px' }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
@@ -41,6 +64,5 @@ export const RateContinuous = ({ count = 5, className, defaultValue = 0, value,
                 background: `transparent url(${StarImage}) 0px -26px`,
                 width: `${fullWidth}px`,
                 height: '26px',
-                // backgroundPosition: '0px -25px',
             } })));
 };

package/es/components/atoms/RateV2/index.d.ts

@@ -0,0 +1 @@
+export { RateV2 } from './RateV2';

package/es/components/atoms/RateV2/index.js

@@ -0,0 +1 @@
+export { RateV2 } from './RateV2';

package/es/components/atoms/index.d.ts

@@ -32,5 +32,5 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export * from './Flex';
-export * from './RateContinuous';
+export * from './RateV2';
 export type { SliderProps } from './Slider';

package/es/components/atoms/index.js

@@ -32,4 +32,4 @@ export { ScrollBox } from './ScrollBox';
 export { Rate } from './Rate';
 export { SliderV2 } from './SliderV2';
 export * from './Flex';
-export * from './RateContinuous';
+export * from './RateV2';

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -9,9 +9,10 @@ const defaultProps = {
     cellStyle: {},
     cellActiveStyle: {},
     isPreviewMode: false,
+    isCompact: false,
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, } = props;
+    const { containerStyle, cellBorderStyle, cellStyle, cellActiveStyle, isPreviewMode, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -347,6 +348,6 @@ export const ResizeGrid = props => {
         // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
         return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ backgroundImage: `url(${image})`, backgroundSize: imageSize, backgroundPosition: imagePosition, gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, containerStyle) }, childs.map((cell, idx) => (React.createElement(Cell, { key: idx, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorderStyle, style: cellStyle, activeStyle: cellActiveStyle, isPreviewMode: isPreviewMode })))));
     };
-    return React.createElement(StyledGrid, { className: "grid-wrapper" }, renderGrid());
+    return (React.createElement(StyledGrid, { className: "grid-wrapper", isCompact: !!isCompact }, renderGrid()));
 };
 ResizeGrid.defaultProps = defaultProps;

package/es/components/molecules/ResizeGrid/styled.d.ts

@@ -1 +1,3 @@
-export declare const StyledGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledGrid: import("styled-components").StyledComponent<"div", any, {
+    isCompact: boolean;
+}, never>;

package/es/components/molecules/ResizeGrid/styled.js

@@ -2,7 +2,6 @@
 import styled from 'styled-components';
 export const StyledGrid = styled.div `
   width: 100%;
-  aspect-ratio: 1.5;
   box-sizing: border-box;
 
   * {
@@ -16,5 +15,6 @@ export const StyledGrid = styled.div `
     background-repeat: no-repeat;
     background-position: top left;
     background-size: 100% 100%;
+    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
   }
 `;

package/es/components/molecules/ResizeGrid/types.d.ts

@@ -124,4 +124,5 @@ export interface IResizeGridProps {
     cellBorderStyle?: string;
     cellActiveStyle?: React.CSSProperties;
     containerStyle?: React.CSSProperties;
+    isCompact?: boolean;
 }

package/es/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDeepCompareEffect(callback: any, dependencies: any): void;

package/es/hooks/useDeepCompareEffect.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}

package/es/test.js

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
 import '@antscorp/icons/main.css';
 import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
 // Slider,
-SliderWithInputNumber, Space, UploadImage, RateContinuous, } from './components';
+SliderWithInputNumber, Space, UploadImage, RateV2, } from './components';
 // import { Slider } from 'antd';
 import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
 import { Rate } from './components/atoms/Rate';
@@ -86,7 +86,7 @@ export const App = () => {
     // );
     // ----------------------------  Test Helps End ------------------------------
     // ------------------------ Media template components test start -------------------------
-    const [starValue, setStarValue] = useState(1.5);
+    const [starValue, setStarValue] = useState(1.3);
     return (React.createElement(ConfigProvider, null,
         React.createElement("div", { style: {
                 width: 500,
@@ -99,7 +99,7 @@ export const App = () => {
             } },
             React.createElement("br", null),
             React.createElement("br", null),
-            React.createElement(RateContinuous, { value: starValue, onChange: value => setStarValue(value) }),
+            React.createElement(RateV2, { value: starValue, onChange: value => setStarValue(value) }),
             React.createElement("br", null),
             React.createElement("br", null),
             React.createElement("br", null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.18",
+  "version": "1.3.3-beta.19",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",

package/es/components/atoms/RateContinuous/index.d.ts

@@ -1 +0,0 @@
-export { RateContinuous } from './RateContinuous';

package/es/components/atoms/RateContinuous/index.js

@@ -1 +0,0 @@
-export { RateContinuous } from './RateContinuous';