@antscorp/antsomi-ui 1.6.7 → 1.6.9

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

@@ -0,0 +1,18 @@
+import React from 'react';
+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 RateV2: React.FC<RateContinuousProps>;
+export {};

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

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
+const STAR_WIDTH = 30;
+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;
+    // 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(0);
+    const handleMouseMove = e => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        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
+        if (!value)
+            setCurrWidth(fillWidth);
+        if (onChange)
+            onChange(parseNumDecimals(fillWidth / STAR_WIDTH, 2));
+    };
+    useEffect(() => {
+        if (typeof value === 'number') {
+            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',
+            height: '28px',
+        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
+        React.createElement("div", { className: "custom-rate custom-rate--fill", style: {
+                position: 'absolute',
+                background: `url(${StarImage}) 0px 0px`,
+                width: `${fillWidth}px`,
+                height: '26px',
+                zIndex: 1,
+            } }),
+        React.createElement("div", { className: "custom-rate custom-rate--empty", style: {
+                position: 'absolute',
+                top: '0px',
+                left: '0px',
+                backgroundImage: 'none',
+                background: `transparent url(${StarImage}) 0px -26px`,
+                width: `${fullWidth}px`,
+                height: '26px',
+            } })));
+};

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/SliderV2/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { SliderRangeProps, SliderSingleProps } from 'antd/es/slider';
-export interface SliderProps extends SliderSingleProps {
+export interface SliderProps {
+    defaultSliderTrack?: boolean;
 }
-export declare const SliderV2: React.FC<SliderProps | SliderRangeProps>;
+export declare const SliderV2: React.FC<(SliderSingleProps & SliderProps) | (SliderRangeProps & SliderProps)>;

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

@@ -4,20 +4,18 @@ import React, { useState } from 'react';
 import { Slider as AntdSlider } from 'antd';
 // React.FC<SliderProps>
 export const SliderV2 = props => {
-    const [value, setValue] = useState(0);
-    // console.log('sliderRef:: ', sliderRef);
-    // const min = props.min || 0;
-    // const max = props.max || 100;
-    const { min, max, onChange, styles, range } = props;
-    if (min && max && min < 0 && max > 0 && !range) {
+    const { min, max, onChange, styles, range, value, defaultValue, marks, defaultSliderTrack } = props;
+    const [valueInternal, setValueInternal] = useState(defaultValue || min || 0);
+    if (min && max && min < 0 && max > 0 && !range && !defaultSliderTrack) {
         const sliderWidth = max - min;
-        const leftTrackPosition = `${(Math.abs(value > 0 ? min : min - value) / sliderWidth) * 100}%`;
-        const sliderTrackWidth = `${(Math.abs(value) / sliderWidth) * 100}%`;
-        return (React.createElement(AntdSlider, Object.assign({ value: value, onChange: value => {
-                setValue(value);
+        const calcValue = value || valueInternal;
+        const leftTrackPosition = `${(Math.abs(calcValue > 0 ? min : min - calcValue) / sliderWidth) * 100}%`;
+        const sliderTrackWidth = `${(Math.abs(calcValue) / sliderWidth) * 100}%`;
+        return (React.createElement(AntdSlider, Object.assign({ value: value || valueInternal, onChange: value => {
+                setValueInternal(value);
                 if (onChange)
                     onChange(value);
-            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: { 0: ' ' } }, props)));
+            }, styles: Object.assign({ track: Object.assign({ left: leftTrackPosition, width: sliderTrackWidth }, styles === null || styles === void 0 ? void 0 : styles.track) }, styles), marks: marks || { 0: ' ' } }, props)));
     }
     return React.createElement(AntdSlider, Object.assign({}, props));
 };

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

@@ -40,6 +40,7 @@ export * from './ReactIframe';
 export * from './Scrollbars';
 export * from './Switch';
 export * from './Button';
+export * from './RateV2';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -40,3 +40,4 @@ export * from './ReactIframe';
 export * from './Scrollbars';
 export * from './Switch';
 export * from './Button';
+export * from './RateV2';

package/package.json

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