@antscorp/antsomi-ui 1.3.3-beta.9 → 1.3.4

package/es/components/molecules/ColorSetting/index.js

@@ -73,7 +73,7 @@ export const ColorSetting = props => {
             });
         }
     };
-    const presetColors = customColors ? (React.createElement("div", null,
+    const presetColors = (React.createElement("div", null,
         React.createElement("div", { style: stylingCenter },
             React.createElement(Text, null, "Color Profile"),
             !isHideBtnEdit && (React.createElement(Button, { type: "primary", onClick: onClickEdit }, "Edit"))),
@@ -83,14 +83,14 @@ export const ColorSetting = props => {
             customColors && customColors.length
                 ? customColors.map((customColor, idx) => (React.createElement(PresetColor, { key: idx, color: customColor, onClick: () => onClickPresetColor(customColor) },
                     React.createElement("div", { className: "__color", style: { backgroundColor: customColor } }))))
-                : null))) : null;
+                : null)));
     return (React.createElement(SettingWrapper, { label: label, className: className, labelClassName: labelClassName, labelStyle: labelStyling, vertical: vertical },
         React.createElement(ColorPicker, Object.assign({}, restOf, { color: color, presetColors: presetColors, onChange: onChange }))));
 };
 ColorSetting.defaultProps = {
     label: '',
     labelClassName: '',
-    // customColors: [],
+    customColors: [],
     isHideBtnEdit: true,
     callback: () => { },
     onChange: () => { },

package/es/components/molecules/GradientSetting/index.d.ts

@@ -5,32 +5,15 @@ interface GradientColor {
     gradientColorLocation: number;
 }
 type PositionValue = (typeof POSITION)[keyof typeof POSITION]['value'];
-export interface GradientConfig {
+interface GradientConfig {
     gradients: GradientColor[];
     gradientType: 'linear-gradient' | 'radial-gradient';
     radialPosition: PositionValue;
     linearAngle: number;
 }
-interface GradientSettingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+interface GradientSettingProps {
     onChange?: (gradientConfig: GradientConfig) => void;
-    /** Return full background css with gradient color
-     * * @example
-     * ```
-     * getCSSProperty={value => {
-     *    // format of value is something like that: linear-gradient(90deg, rgb(209, 26, 102) 0%, rgb(255, 189, 100) 50%)
-     *    setBackgroundProperty(value)
-     * }}
-     * ```
-     */
-    getCSSProperty?: (value: string) => void;
     defaultValue?: GradientConfig;
-    /** Use to store color settings, if customColors undefine => hide preset colors
-     * @example
-     * ```
-     * customColors={['#646EFFDB', '#D11AB2']}
-     * ```
-     */
-    customColors?: string[];
 }
 export declare const GradientSetting: React.FC<GradientSettingProps>;
 export {};

package/es/components/molecules/GradientSetting/index.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 // Libraries
 import React, { useEffect, useState } from 'react';
 // Components
@@ -22,15 +11,13 @@ import { cloneDeep } from 'lodash';
 import { GRADIENT_TYPE, POSITION } from '@antscorp/antsomi-ui/es/constants';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
-import { GradientSettingWrapper } from './styled';
 const GRADIENT_MIN = 2;
 const GRADIENT_MAX = 5;
 const DEFAULT_GRADIENTS = [
     { gradientColor: '#D11A66', gradientColorLocation: 0 },
     { gradientColor: '#FFBD64', gradientColorLocation: 50 },
 ];
-export const GradientSetting = props => {
-    const { defaultValue, customColors, className, onChange, getCSSProperty } = props, rest = __rest(props, ["defaultValue", "customColors", "className", "onChange", "getCSSProperty"]);
+export const GradientSetting = ({ onChange, defaultValue }) => {
     const { gradientType: defaultGradientType, gradients: defaultGradients, linearAngle: defaultLinearAngle, radialPosition: defaultRadialPosition, } = defaultValue || {};
     // const { t } = useTranslation();
     const { t } = i18nInstance;
@@ -39,49 +26,40 @@ export const GradientSetting = props => {
     const [radialPosition, setRadialPosition] = useState(defaultRadialPosition || 'center center');
     const [linearAngle, setLinearAngle] = useState(defaultLinearAngle || 90);
     useEffect(() => {
-        if (onChange) {
-            onChange({ gradients, gradientType, radialPosition, linearAngle });
-        }
-        if (getCSSProperty) {
-            const prefixGradient = gradientType === 'linear-gradient'
-                ? `${linearAngle}deg`
-                : radialPosition !== 'center center'
-                    ? `circle at ${radialPosition}`
-                    : 'circle';
-            const gradientColor = gradients === null || gradients === void 0 ? void 0 : gradients.map(item => `${item.gradientColor} ${item.gradientColorLocation}%`).join(', ');
-            const gradientConfig = `${gradientType}(${prefixGradient}, ${gradientColor})`;
-            getCSSProperty(gradientConfig);
-        }
+        onChange && onChange({ gradients, gradientType, radialPosition, linearAngle });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
-    return (React.createElement(GradientSettingWrapper, Object.assign({ className: className || '' }, rest),
-        React.createElement(SettingWrapper, { className: "setting-container", label: t(translations.gradientStyle) },
-            React.createElement(Select, { options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
-        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "setting-container", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "setting-container", label: t(translations.position) },
-            React.createElement(Select, { options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.gradientStyle) },
+            React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
+        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.position) },
+            React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
         Array.isArray(gradients) && gradients.length
             ? gradients.map((gradient, index) => {
                 const { gradientColor, gradientColorLocation } = gradient;
-                return (React.createElement("div", { className: "color-setting__controller", key: index },
-                    React.createElement(ColorSetting, { labelClassName: "color-picker__label", label: t(translations.gradientColor, {
-                            name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                        }), color: gradientColor, positionInput: "right", onChange: color => {
-                            setGradients(prev => {
-                                const clonePrev = cloneDeep(prev);
-                                clonePrev[index].gradientColor = color;
-                                return clonePrev;
-                            });
-                        }, customColors: customColors }),
-                    React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
-                            name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                        }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
-                            setGradients(prev => {
-                                const clonePrev = cloneDeep(prev);
-                                clonePrev[index].gradientColorLocation = color;
-                                return clonePrev;
-                            });
-                        } }),
-                    (gradients === null || gradients === void 0 ? void 0 : gradients.length) > GRADIENT_MIN && (React.createElement(Icon, { type: "icon-ants-outline-delete", onClick: () => {
+                return (React.createElement("div", { className: "ants-flex ants-gap-x-2 ants-mb-[15px]", key: index },
+                    React.createElement("div", { className: "ants-grid md:ants-grid-cols-5 ants-grid-cols-1 ants-gap-y-5" },
+                        React.createElement("div", { className: "ants-col-span-2" },
+                            React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base", label: t(translations.gradientColor, {
+                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                }), color: gradientColor, positionInput: "right", onChange: color => {
+                                    setGradients(prev => {
+                                        const clonePrev = cloneDeep(prev);
+                                        clonePrev[index].gradientColor = color;
+                                        return clonePrev;
+                                    });
+                                } })),
+                        React.createElement("div", { className: "ants-col-span-3" },
+                            React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
+                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
+                                    setGradients(prev => {
+                                        const clonePrev = cloneDeep(prev);
+                                        clonePrev[index].gradientColorLocation = color;
+                                        return clonePrev;
+                                    });
+                                } }))),
+                    (gradients === null || gradients === void 0 ? void 0 : gradients.length) > GRADIENT_MIN && (React.createElement(Icon, { type: "icon-ants-outline-delete", className: "ants-text-primary ants-cursor-pointer", style: { alignSelf: 'flex-end', marginBottom: '10px', fontSize: '16px' }, onClick: () => {
                             const clonePrev = cloneDeep(gradients);
                             clonePrev.splice(index, 1);
                             setGradients(clonePrev);

package/es/components/molecules/InputNumber/index.js

@@ -19,7 +19,7 @@ import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = '@antscorp/antsomi-ui/es/app/components/molecules/InputNumber/index.tsx';
 export const InputNumber = props => {
-    const { label, required, focused, errorMsg, onChange, className } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange", "className"]);
+    const { label, required, focused, errorMsg, onChange } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange"]);
     const [isFocused, setFocused] = useState(false);
     const requiredMsg = useMemo(() => {
         let msg = '';
@@ -65,7 +65,7 @@ export const InputNumber = props => {
     if (props.disableUndo) {
         listDisableActions.push('undo');
     }
-    return (React.createElement("div", { className: className },
+    return (React.createElement("div", null,
         label && renderRequiredLabel(label),
         React.createElement(AntdInputNumber, Object.assign({}, restOf, { className: "--show-handler", required: required, onChange: onChangeInputNumber, onBlur: e => {
                 if (!focused) {

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

@@ -10,6 +10,6 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/Select/Test.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const SelectTest: () => React.JSX.Element;
+declare const SelectTest: () => JSX.Element;
 export default SelectTest;

package/es/components/molecules/SettingWrapper/index.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-export interface SettingWrapperProps {
+interface SettingWrapperProps {
     label: string;
     className?: string;
     labelColor?: string;
@@ -10,3 +10,4 @@ export interface SettingWrapperProps {
     children?: React.ReactNode;
 }
 export declare const SettingWrapper: React.FC<SettingWrapperProps>;
+export {};

package/es/components/molecules/TreeSelect/TreeSelect.d.ts

@@ -7,5 +7,5 @@ export declare const TreeSelect: (<ValueType = any, OptionType extends import("r
     SHOW_ALL: "SHOW_ALL";
     SHOW_PARENT: "SHOW_PARENT";
     SHOW_CHILD: "SHOW_CHILD";
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
 };

package/es/components/molecules/UploadImage/MediaIcon.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const MediaIcon: (_props: any) => React.JSX.Element;
+declare const MediaIcon: (_props: any) => JSX.Element;
 export default MediaIcon;

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

@@ -25,13 +25,6 @@ export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
 export { Collapse } from './Collapse';
 export { Drawer } from './Drawer';
-export { SettingWrapperPopover } from './SettingWrapperPopover';
-export { FontWeightSelect } from './FontWeightSelect';
-export { FontFamilySelect } from './FontFamilySelect';
-export { TextDecorationSelect } from './TextDecorationSelect';
-export { TextTransformSelect } from './TextTransformSelect';
-export { FontSetting, FontSettingEdit } from './FontSetting';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';
-export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';

package/es/components/molecules/index.js

@@ -25,9 +25,3 @@ export { InputNumberWithUnit } from './InputNumberWithUnit';
 export { GradientSetting } from './GradientSetting';
 export { Collapse } from './Collapse';
 export { Drawer } from './Drawer';
-export { SettingWrapperPopover } from './SettingWrapperPopover';
-export { FontWeightSelect } from './FontWeightSelect';
-export { FontFamilySelect } from './FontFamilySelect';
-export { TextDecorationSelect } from './TextDecorationSelect';
-export { TextTransformSelect } from './TextTransformSelect';
-export { FontSetting, FontSettingEdit } from './FontSetting';

package/es/constants/storybook.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
@@ -8,5 +7,5 @@ export declare const TABLE_API_COLUMNS: ({
     title: string;
     dataIndex: string;
     key: string;
-    render: (text: any) => React.JSX.Element;
+    render: (text: any) => JSX.Element;
 })[];

package/es/test.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@antscorp/icons/main.css';
 export declare const BACKGROUND_COLOR_STYLE: {
     SOLID: {
@@ -11,4 +10,4 @@ export declare const BACKGROUND_COLOR_STYLE: {
     };
 };
 export declare const customColors: string[];
-export declare const App: () => React.JSX.Element;
+export declare const App: () => JSX.Element;

package/es/test.js

@@ -1,13 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import '@antscorp/icons/main.css';
-import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
-// Slider,
-SliderWithInputNumber, Space, UploadImage, } from './components';
-// import { Slider } from 'antd';
-import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
-import { Rate } from './components/atoms/Rate';
+import { ColorSetting, ConfigProvider, EdgeSetting, IconSelection, InputNumberWithUnit, PositionSetting, RadioGroup, SettingWrapper, SliderWithInputNumber, Space, UploadImage, } from './components';
+// Constants
+import { THEME } from './constants';
 export const BACKGROUND_COLOR_STYLE = {
     SOLID: {
         value: 'color',
@@ -31,6 +28,7 @@ export const customColors = [
     '#57b8c2',
 ];
 export const App = () => {
+    var _a;
     const [state, setState] = useState({
         option: {
             dateType: 'today',
@@ -99,7 +97,15 @@ export const App = () => {
             React.createElement("h2", { style: { textAlign: 'center' } }, "Test component of media template"),
             React.createElement(Space, { size: 20, direction: "vertical" },
                 React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
-                    React.createElement(GradientSetting, null)),
+                    React.createElement(ColorSetting, { label: "Background Color", labelStyling: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon }, color: colorSettingState.color, customColors: colorSettingState.customColors, callback: callbackColorSetting, onChange: handleChangeColorSetting })),
+                React.createElement(SettingWrapper, { vertical: true, label: "Input number with unit" },
+                    React.createElement(InputNumberWithUnit, { unit: "px", min: 0, max: 2000, value: 700, onChange: value => {
+                            console.log('onChange:: ', value);
+                        }, onChangeUnit: unit => {
+                            console.log('onChangeUnit:: ', unit);
+                        } })),
+                React.createElement(SettingWrapper, { label: "Radio Group" },
+                    React.createElement(RadioGroup, { options: Object.values(BACKGROUND_COLOR_STYLE), value: radioValue, onChange: e => handleChangeRadio(e) })),
                 React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),
                 React.createElement(EdgeSetting, { label: "Notification Spacing", unit: "px", linked: false, values: edge, 
                     // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
@@ -134,22 +140,29 @@ export const App = () => {
                             console.log('onChangeSvg', value);
                         } }))))));
     // ------------------------ Media template components test end -------------------------
-    return (React.createElement("div", { style: { width: '500px', margin: '32px' } },
-        React.createElement(GradientSetting, { onChange: e => console.log('gradient change') }),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Slider, { className: "test-classname", min: -10, max: 10, onChange: e => console.log('slider change', e) }),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Rate, null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Slider, { className: "test-classname" })));
+    // return (
+    //   <DatePicker.AdvancedRangePicker
+    //     disabled
+    //     showTime={false}
+    //     timeRange={{
+    //       startDate: {
+    //         date: '',
+    //         calculationDate: 'years',
+    //         value: 1,
+    //         calculationType: 'minus',
+    //         dateType: 'today',
+    //       },
+    //       endDate: {
+    //         date: '',
+    //         calculationDate: 'days',
+    //         value: 1,
+    //         calculationType: 'minus',
+    //         dateType: 'today',
+    //       },
+    //     }}
+    //   />
+    // );
 };
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(ConfigProvider, { locale: "en" },
-        React.createElement(App, null))));
+ReactDOM.render(React.createElement(React.StrictMode, null,
+    React.createElement(ConfigProvider, { locale: "vi" },
+        React.createElement(App, null))), document.getElementById('root'));

package/package.json

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

package/es/components/atoms/Popover/styled.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
-    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
-}, any, {}, never>;

package/es/components/atoms/Popover/styled.js

@@ -1,5 +0,0 @@
-// Libraries
-import styled from 'styled-components';
-// Components
-import { Popover as AntdPopover } from 'antd';
-export const PopoverWrapper = styled(AntdPopover) ``;

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

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

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

@@ -1,23 +0,0 @@
-// Libraries
-import React, { useState } from 'react';
-// Antd Components
-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 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);
-                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)));
-    }
-    return React.createElement(AntdSlider, Object.assign({}, props));
-};