@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.14

package/es/test.js

@@ -1,376 +1,376 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import '@antscorp/icons/main.css';
-import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, SlideBar, } from './components';
-// Queries configs
-import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
-export const BACKGROUND_COLOR_STYLE = {
-    SOLID: {
-        value: 'color',
-        label: 'Solid',
-    },
-    GRADIENT: {
-        value: 'gradient',
-        label: 'Gradient',
-    },
-};
-const DOMAIN_MEDIA_SANDBOX = 'https://sandbox-media-template.antsomi.com/cdp';
-export const customColors = [
-    '#f7da64',
-    '#8912dd',
-    '#ed1515',
-    '#230439',
-    '#d11a66',
-    '#ffbd64',
-    '#f1ab96',
-    '#824ccd',
-    '#5858e9',
-    '#57b8c2',
-];
-export const App = () => {
-    // const [valueShortlink, setValueShortlink] = useState('#{shortlink(https://test.com.vn)}');
-    const [valueShortlink, setValueShortlink] = useState('');
-    const [state, setState] = useState({
-        option: {
-            dateType: 'today',
-            calculationDate: 'years',
-            calculationType: 'minus',
-            value: 1,
-        },
-        date: '',
-        format: 'YYYYMMDD',
-    });
-    const [colorSettingState, setColorSettingState] = useState({
-        color: 'green',
-        customColors,
-    });
-    const [stateSlideBar, setStateSlideBar] = useState({
-        errors: [],
-        disabled: true,
-        prefix: 'Item',
-        isViewMode: false,
-        isShowAdd: true,
-        limit: {
-            min: 1,
-            max: 2,
-        },
-        activeId: '1',
-        options: Array.from({ length: 5 }, (_, index) => ({
-            label: `Item ${index + 1}`,
-            value: `${index + 1}`,
-        })),
-        isShowLabelSequentially: false,
-    });
-    const [radioValue, setRadioValue] = useState('color');
-    const [sliderValue, setSliderValue] = useState(10);
-    const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
-    const [icon, setIcon] = useState('');
-    console.log('valueShortlink :>', valueShortlink);
-    const callbackColorSetting = (key, dataIn) => {
-        switch (key) {
-            case 'ON_ADD_NEW_PRESET':
-                // eslint-disable-next-line no-case-declarations
-                const { customColors = [] } = dataIn;
-                setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { customColors })));
-                break;
-            case 'ON_EDIT_CLICKED': {
-                // eslint-disable-next-line no-console
-                console.log('insideee.dev - clicked edit preset :>');
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const handleChangeColorSetting = (colorOut) => {
-        setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { color: colorOut })));
-    };
-    const handleChangeRadio = e => {
-        const { value = '' } = e.target;
-        setRadioValue(value);
-    };
-    const handleChangeSlider = value => {
-        setSliderValue(value);
-    };
-    const handleSetIcon = value => {
-        setIcon(value);
-    };
-    const callbackSlideBar = (type, data) => {
-        console.log({ type, data });
-    };
-    // --------------------------- Test SlideBar start -------------------------------------------
-    return (React.createElement("div", { style: {
-            width: 500,
-            height: 500,
-            border: '1px solid black',
-            margin: '0 auto',
-            padding: 12,
-            borderRadius: '10px',
-        } },
-        React.createElement(SlideBar, Object.assign({}, stateSlideBar, { callback: callbackSlideBar }))));
-    // --------------------------- Test SlideBar end -------------------------------------------
-    // ----------------------------  Test Input Dynamic start ------------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       width: 500,
-    //       height: 500,
-    //       border: '1px solid black',
-    //       margin: '0 auto',
-    //       padding: 12,
-    //       borderRadius: '10px',
-    //     }}
-    //   >
-    //     <InputDynamic
-    //       errors={[]}
-    //       onChange={dataOut => setValueShortlink(dataOut)}
-    //       onError={() => {}}
-    //       isViewMode={false}
-    //       canMultipleLine={false}
-    //       value={valueShortlink}
-    //     />
-    //   </div>
-    // );
-    return (React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
-        React.createElement("div", { style: {
-                width: 500,
-                height: 500,
-                border: '1px solid black',
-                margin: '0 auto',
-                padding: 12,
-                borderRadius: '10px',
-            } },
-            React.createElement(InputDynamic, { errors: [], onChange: dataOut => setValueShortlink(dataOut), onError: () => { }, isViewMode: false, canMultipleLine: false, allowDynamicOptions: ['addPersonalization', 'shortlink'], value: valueShortlink }),
-            React.createElement(SettingWrapper, { vertical: true, label: "Background Image", containerStyle: { gap: '20px' } },
-                React.createElement(UploadImage, { domainMedia: "https://sandbox-media-template.antsomi.com", slug: "cdp/api/v1", labelButtonSelect: "Select Toggle from Computor", labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search toggle", paramConfigs: {
-                        token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
-                        userId: '1600084695',
-                        accountId: '1600084695',
-                    }, 
-                    // title="Background Image"
-                    selectedImage: {
-                        url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-                    }, onChangeImage: image => { }, onRemoveImage: () => {
-                        // onChangeSettings('backgroundImageObj', {
-                        //   name: '',
-                        //   previewUrl: '',
-                        // });
-                    } })))));
-    // --------------------------- Test SlideBar end -------------------------------------------
-    // ----------------------------  Test Input Dynamic start ------------------------------
-    // return (
-    //   <div
-    //     style={{
-    //       width: 500,
-    //       height: 500,
-    //       border: '1px solid black',
-    //       margin: '0 auto',
-    //       padding: 12,
-    //       borderRadius: '10px',
-    //     }}
-    //   >
-    //     <InputDynamic
-    //       errors={[]}
-    //       onChange={dataOut => setValueShortlink(dataOut)}
-    //       onError={() => {}}
-    //       isViewMode={false}
-    //       canMultipleLine={false}
-    //       value={valueShortlink}
-    //     />
-    //   </div>
-    // );
-    // ----------------------------  Test Input Dynamic End ------------------------------
-    // ----------------------------  Test Helps Start ------------------------------
-    // return (
-    //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
-    //     <Help />
-    //   </div>
-    // );
-    // ----------------------------  Test Helps End ------------------------------
-    // ------------------------ Media template components test start -------------------------
-    // return (
-    //   <ConfigProvider>
-    //     <div
-    //       style={{
-    //         width: 500,
-    //         height: 1000,
-    //         border: '1px solid black',
-    //         margin: '0 auto',
-    //         padding: 12,
-    //         borderRadius: '10px',
-    //         marginTop: 12,
-    //       }}
-    //     >
-    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
-    //       <Space size={20} direction="vertical">
-    //         {/* <SettingWrapper vertical label="Color Setting">
-    //           <ColorSetting
-    //             label="Background Color"
-    //             labelStyling={{ color: THEME.token?.colorIcon }}
-    //             color={colorSettingState.color}
-    //             customColors={colorSettingState.customColors}
-    //             callback={callbackColorSetting}
-    //             onChange={handleChangeColorSetting}
-    //           />
-    //         </SettingWrapper>
-    //         <SettingWrapper vertical label="Input number with unit">
-    //           <InputNumberWithUnit
-    //             unit="px"
-    //             min={0}
-    //             max={2000}
-    //             value={700}
-    //             onChange={value => {
-    //               console.log('onChange:: ', value);
-    //             }}
-    //             onChangeUnit={unit => {
-    //               console.log('onChangeUnit:: ', unit);
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //         <SettingWrapper label="Radio Group">
-    //           <RadioGroup
-    //             options={Object.values(BACKGROUND_COLOR_STYLE)}
-    //             value={radioValue}
-    //             onChange={e => handleChangeRadio(e)}
-    //           />
-    //         </SettingWrapper> */}
-    //         <SettingWrapper vertical label="Color Setting">
-    //           <GradientSetting />
-    //         </SettingWrapper>
-    //         <SliderWithInputNumber
-    //           label="Size (px)"
-    //           labelStyling={{ marginTop: 10 }}
-    //           min={0}
-    //           max={100}
-    //           value={sliderValue}
-    //           onAfterChange={handleChangeSlider}
-    //         />
-    //         <EdgeSetting
-    //           label="Notification Spacing"
-    //           unit="px"
-    //           linked={false}
-    //           values={edge}
-    //           // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
-    //           onChange={({ values, linked, unit }) => {
-    //             setEdge(values);
-    //             // onUpdateSettings({
-    //             //   gapX: values[0] + unit,
-    //             //   gapY: values[1] + unit,
-    //             //   gapSuffix: unit,
-    //             //   linkedGapInput: linked,
-    //             // });
-    //           }}
-    //         />
-    //         <PositionSetting
-    //           settings={{ linkedPositionInput: false, positionSuffix: 'px' }}
-    //           styles={{ top: '10px', right: '20px', bottom: '30', left: '40' }}
-    //           onChange={() => {}}
-    //         />
-    //       </Space>
-    //       <Space size={10} direction="vertical">
-    //         <SettingWrapper vertical label="Background Image" containerStyle={{ gap: '20px' }}>
-    //           <UploadImage
-    //             domainMedia="https://sandbox-media-template.antsomi.com"
-    //             slug="cdp/api/v1"
-    //             labelButtonSelect="Select Toggle from Computor"
-    //             labelHeadingModal="Toggle Selection"
-    //             searchPlaceholder="Search toggle"
-    //             paramConfigs={{
-    //               token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
-    //               userId: '1600084695',
-    //               accountId: '1600084695',
-    //             }}
-    //             // title="Background Image"
-    //             selectedImage={{
-    //               url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-    //             }}
-    //             onChangeImage={image =>
-    //               // onChangeSettings('backgroundImageObj', {
-    //               //   name: image.name,
-    //               //   previewUrl: image.url,
-    //               // })
-    //               {}
-    //             }
-    //             onRemoveImage={() => {
-    //               // onChangeSettings('backgroundImageObj', {
-    //               //   name: '',
-    //               //   previewUrl: '',
-    //               // });
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //         <SettingWrapper vertical label="Icon">
-    //           <IconSelection
-    //             isOpen={false}
-    //             labelHeadingModal="Toggle Selection"
-    //             searchPlaceholder="Search for toggle..."
-    //             icon={icon}
-    //             onChange={handleSetIcon}
-    //             iconTypes={['cus', 'font-awesome']}
-    //             onChangeSvg={value => {
-    //               console.log('onChangeSvg', value);
-    //             }}
-    //           />
-    //         </SettingWrapper>
-    //       </Space>
-    //     </div>
-    //   </ConfigProvider>
-    // );
-    // const [time, setTime] = useState<string[]>([]);
-    // const [times, setTimes] = useState<Value>({
-    //   rangeInfo: { type: 'last_14_days' },
-    //   rangeValue: [{ start: null, end: null }],
-    // });
-    // return (
-    //   <ConfigProvider>
-    //     <div
-    //       style={{
-    //         width: 500,
-    //         height: 1000,
-    //         border: '1px solid black',
-    //         margin: '0 auto',
-    //         padding: 12,
-    //         borderRadius: '10px',
-    //         marginTop: 12,
-    //       }}
-    //     >
-    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
-    //       <CalendarSelection
-    //         value={times}
-    //         onChange={(value, info) => {
-    //           console.log({ info, value });
-    //           // setTime([value.rangeValue[0].start, value.rangeValue[0].end]);
-    //           setTimes(value);
-    //         }}
-    //       />
-    //     </div>
-    //   </ConfigProvider>
-    // );
-    // ------------------------ Media template components test end -------------------------
-    // return (
-    //   <div style={{ width: '500px', margin: '32px' }}>
-    //     <GradientSetting onChange={e => console.log('gradient change')} />
-    //     <br />
-    //     <br />
-    //     <br />
-    //     <br />
-    //     <Slider
-    //       className="test-classname"
-    //       min={-10}
-    //       max={10}
-    //       onChange={e => console.log('slider change', e)}
-    //     />
-    //     <br />
-    //     <br />
-    //     <Rate />
-    //     <br />
-    //     <br />
-    //     <Slider className="test-classname" />
-    //   </div>
-    // );
-};
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(React.createElement(ConfigProvider, { locale: "en" },
-    React.createElement(App, null)));
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@antscorp/icons/main.css';
+import { ConfigProvider, InputDynamic, SettingWrapper, UploadImage, SlideBar, } from './components';
+// Queries configs
+import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
+export const BACKGROUND_COLOR_STYLE = {
+    SOLID: {
+        value: 'color',
+        label: 'Solid',
+    },
+    GRADIENT: {
+        value: 'gradient',
+        label: 'Gradient',
+    },
+};
+const DOMAIN_MEDIA_SANDBOX = 'https://sandbox-media-template.antsomi.com/cdp';
+export const customColors = [
+    '#f7da64',
+    '#8912dd',
+    '#ed1515',
+    '#230439',
+    '#d11a66',
+    '#ffbd64',
+    '#f1ab96',
+    '#824ccd',
+    '#5858e9',
+    '#57b8c2',
+];
+export const App = () => {
+    // const [valueShortlink, setValueShortlink] = useState('#{shortlink(https://test.com.vn)}');
+    const [valueShortlink, setValueShortlink] = useState('');
+    const [state, setState] = useState({
+        option: {
+            dateType: 'today',
+            calculationDate: 'years',
+            calculationType: 'minus',
+            value: 1,
+        },
+        date: '',
+        format: 'YYYYMMDD',
+    });
+    const [colorSettingState, setColorSettingState] = useState({
+        color: 'green',
+        customColors,
+    });
+    const [stateSlideBar, setStateSlideBar] = useState({
+        errors: [],
+        disabled: true,
+        prefix: 'Item',
+        isViewMode: false,
+        isShowAdd: true,
+        limit: {
+            min: 1,
+            max: 2,
+        },
+        activeId: '1',
+        options: Array.from({ length: 5 }, (_, index) => ({
+            label: `Item ${index + 1}`,
+            value: `${index + 1}`,
+        })),
+        isShowLabelSequentially: false,
+    });
+    const [radioValue, setRadioValue] = useState('color');
+    const [sliderValue, setSliderValue] = useState(10);
+    const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
+    const [icon, setIcon] = useState('');
+    console.log('valueShortlink :>', valueShortlink);
+    const callbackColorSetting = (key, dataIn) => {
+        switch (key) {
+            case 'ON_ADD_NEW_PRESET':
+                // eslint-disable-next-line no-case-declarations
+                const { customColors = [] } = dataIn;
+                setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { customColors })));
+                break;
+            case 'ON_EDIT_CLICKED': {
+                // eslint-disable-next-line no-console
+                console.log('insideee.dev - clicked edit preset :>');
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    const handleChangeColorSetting = (colorOut) => {
+        setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { color: colorOut })));
+    };
+    const handleChangeRadio = e => {
+        const { value = '' } = e.target;
+        setRadioValue(value);
+    };
+    const handleChangeSlider = value => {
+        setSliderValue(value);
+    };
+    const handleSetIcon = value => {
+        setIcon(value);
+    };
+    const callbackSlideBar = (type, data) => {
+        console.log({ type, data });
+    };
+    // --------------------------- Test SlideBar start -------------------------------------------
+    return (React.createElement("div", { style: {
+            width: 500,
+            height: 500,
+            border: '1px solid black',
+            margin: '0 auto',
+            padding: 12,
+            borderRadius: '10px',
+        } },
+        React.createElement(SlideBar, Object.assign({}, stateSlideBar, { callback: callbackSlideBar }))));
+    // --------------------------- Test SlideBar end -------------------------------------------
+    // ----------------------------  Test Input Dynamic start ------------------------------
+    // return (
+    //   <div
+    //     style={{
+    //       width: 500,
+    //       height: 500,
+    //       border: '1px solid black',
+    //       margin: '0 auto',
+    //       padding: 12,
+    //       borderRadius: '10px',
+    //     }}
+    //   >
+    //     <InputDynamic
+    //       errors={[]}
+    //       onChange={dataOut => setValueShortlink(dataOut)}
+    //       onError={() => {}}
+    //       isViewMode={false}
+    //       canMultipleLine={false}
+    //       value={valueShortlink}
+    //     />
+    //   </div>
+    // );
+    return (React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
+        React.createElement("div", { style: {
+                width: 500,
+                height: 500,
+                border: '1px solid black',
+                margin: '0 auto',
+                padding: 12,
+                borderRadius: '10px',
+            } },
+            React.createElement(InputDynamic, { errors: [], onChange: dataOut => setValueShortlink(dataOut), onError: () => { }, isViewMode: false, canMultipleLine: false, allowDynamicOptions: ['addPersonalization', 'shortlink'], value: valueShortlink }),
+            React.createElement(SettingWrapper, { vertical: true, label: "Background Image", containerStyle: { gap: '20px' } },
+                React.createElement(UploadImage, { domainMedia: "https://sandbox-media-template.antsomi.com", slug: "cdp/api/v1", labelButtonSelect: "Select Toggle from Computor", labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search toggle", paramConfigs: {
+                        token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
+                        userId: '1600084695',
+                        accountId: '1600084695',
+                    }, 
+                    // title="Background Image"
+                    selectedImage: {
+                        url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
+                    }, onChangeImage: image => { }, onRemoveImage: () => {
+                        // onChangeSettings('backgroundImageObj', {
+                        //   name: '',
+                        //   previewUrl: '',
+                        // });
+                    } })))));
+    // --------------------------- Test SlideBar end -------------------------------------------
+    // ----------------------------  Test Input Dynamic start ------------------------------
+    // return (
+    //   <div
+    //     style={{
+    //       width: 500,
+    //       height: 500,
+    //       border: '1px solid black',
+    //       margin: '0 auto',
+    //       padding: 12,
+    //       borderRadius: '10px',
+    //     }}
+    //   >
+    //     <InputDynamic
+    //       errors={[]}
+    //       onChange={dataOut => setValueShortlink(dataOut)}
+    //       onError={() => {}}
+    //       isViewMode={false}
+    //       canMultipleLine={false}
+    //       value={valueShortlink}
+    //     />
+    //   </div>
+    // );
+    // ----------------------------  Test Input Dynamic End ------------------------------
+    // ----------------------------  Test Helps Start ------------------------------
+    // return (
+    //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
+    //     <Help />
+    //   </div>
+    // );
+    // ----------------------------  Test Helps End ------------------------------
+    // ------------------------ Media template components test start -------------------------
+    // return (
+    //   <ConfigProvider>
+    //     <div
+    //       style={{
+    //         width: 500,
+    //         height: 1000,
+    //         border: '1px solid black',
+    //         margin: '0 auto',
+    //         padding: 12,
+    //         borderRadius: '10px',
+    //         marginTop: 12,
+    //       }}
+    //     >
+    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
+    //       <Space size={20} direction="vertical">
+    //         {/* <SettingWrapper vertical label="Color Setting">
+    //           <ColorSetting
+    //             label="Background Color"
+    //             labelStyling={{ color: THEME.token?.colorIcon }}
+    //             color={colorSettingState.color}
+    //             customColors={colorSettingState.customColors}
+    //             callback={callbackColorSetting}
+    //             onChange={handleChangeColorSetting}
+    //           />
+    //         </SettingWrapper>
+    //         <SettingWrapper vertical label="Input number with unit">
+    //           <InputNumberWithUnit
+    //             unit="px"
+    //             min={0}
+    //             max={2000}
+    //             value={700}
+    //             onChange={value => {
+    //               console.log('onChange:: ', value);
+    //             }}
+    //             onChangeUnit={unit => {
+    //               console.log('onChangeUnit:: ', unit);
+    //             }}
+    //           />
+    //         </SettingWrapper>
+    //         <SettingWrapper label="Radio Group">
+    //           <RadioGroup
+    //             options={Object.values(BACKGROUND_COLOR_STYLE)}
+    //             value={radioValue}
+    //             onChange={e => handleChangeRadio(e)}
+    //           />
+    //         </SettingWrapper> */}
+    //         <SettingWrapper vertical label="Color Setting">
+    //           <GradientSetting />
+    //         </SettingWrapper>
+    //         <SliderWithInputNumber
+    //           label="Size (px)"
+    //           labelStyling={{ marginTop: 10 }}
+    //           min={0}
+    //           max={100}
+    //           value={sliderValue}
+    //           onAfterChange={handleChangeSlider}
+    //         />
+    //         <EdgeSetting
+    //           label="Notification Spacing"
+    //           unit="px"
+    //           linked={false}
+    //           values={edge}
+    //           // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
+    //           onChange={({ values, linked, unit }) => {
+    //             setEdge(values);
+    //             // onUpdateSettings({
+    //             //   gapX: values[0] + unit,
+    //             //   gapY: values[1] + unit,
+    //             //   gapSuffix: unit,
+    //             //   linkedGapInput: linked,
+    //             // });
+    //           }}
+    //         />
+    //         <PositionSetting
+    //           settings={{ linkedPositionInput: false, positionSuffix: 'px' }}
+    //           styles={{ top: '10px', right: '20px', bottom: '30', left: '40' }}
+    //           onChange={() => {}}
+    //         />
+    //       </Space>
+    //       <Space size={10} direction="vertical">
+    //         <SettingWrapper vertical label="Background Image" containerStyle={{ gap: '20px' }}>
+    //           <UploadImage
+    //             domainMedia="https://sandbox-media-template.antsomi.com"
+    //             slug="cdp/api/v1"
+    //             labelButtonSelect="Select Toggle from Computor"
+    //             labelHeadingModal="Toggle Selection"
+    //             searchPlaceholder="Search toggle"
+    //             paramConfigs={{
+    //               token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
+    //               userId: '1600084695',
+    //               accountId: '1600084695',
+    //             }}
+    //             // title="Background Image"
+    //             selectedImage={{
+    //               url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
+    //             }}
+    //             onChangeImage={image =>
+    //               // onChangeSettings('backgroundImageObj', {
+    //               //   name: image.name,
+    //               //   previewUrl: image.url,
+    //               // })
+    //               {}
+    //             }
+    //             onRemoveImage={() => {
+    //               // onChangeSettings('backgroundImageObj', {
+    //               //   name: '',
+    //               //   previewUrl: '',
+    //               // });
+    //             }}
+    //           />
+    //         </SettingWrapper>
+    //         <SettingWrapper vertical label="Icon">
+    //           <IconSelection
+    //             isOpen={false}
+    //             labelHeadingModal="Toggle Selection"
+    //             searchPlaceholder="Search for toggle..."
+    //             icon={icon}
+    //             onChange={handleSetIcon}
+    //             iconTypes={['cus', 'font-awesome']}
+    //             onChangeSvg={value => {
+    //               console.log('onChangeSvg', value);
+    //             }}
+    //           />
+    //         </SettingWrapper>
+    //       </Space>
+    //     </div>
+    //   </ConfigProvider>
+    // );
+    // const [time, setTime] = useState<string[]>([]);
+    // const [times, setTimes] = useState<Value>({
+    //   rangeInfo: { type: 'last_14_days' },
+    //   rangeValue: [{ start: null, end: null }],
+    // });
+    // return (
+    //   <ConfigProvider>
+    //     <div
+    //       style={{
+    //         width: 500,
+    //         height: 1000,
+    //         border: '1px solid black',
+    //         margin: '0 auto',
+    //         padding: 12,
+    //         borderRadius: '10px',
+    //         marginTop: 12,
+    //       }}
+    //     >
+    //       <h2 style={{ textAlign: 'center' }}>Test component of media template</h2>
+    //       <CalendarSelection
+    //         value={times}
+    //         onChange={(value, info) => {
+    //           console.log({ info, value });
+    //           // setTime([value.rangeValue[0].start, value.rangeValue[0].end]);
+    //           setTimes(value);
+    //         }}
+    //       />
+    //     </div>
+    //   </ConfigProvider>
+    // );
+    // ------------------------ Media template components test end -------------------------
+    // return (
+    //   <div style={{ width: '500px', margin: '32px' }}>
+    //     <GradientSetting onChange={e => console.log('gradient change')} />
+    //     <br />
+    //     <br />
+    //     <br />
+    //     <br />
+    //     <Slider
+    //       className="test-classname"
+    //       min={-10}
+    //       max={10}
+    //       onChange={e => console.log('slider change', e)}
+    //     />
+    //     <br />
+    //     <br />
+    //     <Rate />
+    //     <br />
+    //     <br />
+    //     <Slider className="test-classname" />
+    //   </div>
+    // );
+};
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(ConfigProvider, { locale: "en" },
+    React.createElement(App, null)));