@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

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

@@ -1,3 +1,14 @@
+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
@@ -11,13 +22,15 @@ 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 = ({ onChange, defaultValue }) => {
+export const GradientSetting = props => {
+    const { defaultValue, customColors, className, onChange, getCSSProperty } = props, rest = __rest(props, ["defaultValue", "customColors", "className", "onChange", "getCSSProperty"]);
     const { gradientType: defaultGradientType, gradients: defaultGradients, linearAngle: defaultLinearAngle, radialPosition: defaultRadialPosition, } = defaultValue || {};
     // const { t } = useTranslation();
     const { t } = i18nInstance;
@@ -26,40 +39,49 @@ export const GradientSetting = ({ onChange, defaultValue }) => {
     const [radialPosition, setRadialPosition] = useState(defaultRadialPosition || 'center center');
     const [linearAngle, setLinearAngle] = useState(defaultLinearAngle || 90);
     useEffect(() => {
-        onChange && onChange({ gradients, gradientType, radialPosition, linearAngle });
+        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);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
-    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) }))),
+    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) }))),
         Array.isArray(gradients) && gradients.length
             ? gradients.map((gradient, index) => {
                 const { gradientColor, gradientColorLocation } = gradient;
-                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: () => {
+                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: () => {
                             const clonePrev = cloneDeep(gradients);
                             clonePrev.splice(index, 1);
                             setGradients(clonePrev);

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

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

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

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+export const GradientSettingWrapper = styled.div `
+  .setting-container {
+    margin-top: 15px;
+
+    & .antsomi-select {
+      width: 112px;
+    }
+  }
+
+  & > button {
+    margin-top: 15px;
+  }
+
+  .color-setting__controller {
+    & > i {
+      align-self: flex-end;
+      margin-bottom: 10px;
+      font-size: 16px;
+      color: var(--primary-color);
+      cursor: pointer;
+    }
+
+    display: flex;
+    gap: 10px;
+
+    width: 100%;
+    margin-top: 15px;
+
+    /* Slider css selector */
+    & > div:first-child ~ div {
+      flex: 1;
+    }
+
+    /* Color picker select */
+    & > div:first-child {
+      flex-direction: column;
+      align-items: flex-start;
+
+      & .color-picker__label {
+        color: var(--text-base-color) !important;
+      }
+
+      & .antsomi-color-picker,
+      & .antsomi-popover-button {
+        margin: 0 !important;
+      }
+
+      & .antsomi-color-picker {
+        align-items: center;
+        gap: 10px;
+
+        input {
+          padding: 5px 6px;
+        }
+      }
+    }
+  }
+`;

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 } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange"]);
+    const { label, required, focused, errorMsg, onChange, className } = props, restOf = __rest(props, ["label", "required", "focused", "errorMsg", "onChange", "className"]);
     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", null,
+    return (React.createElement("div", { className: className },
         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/index.d.ts

@@ -1 +1,2 @@
 export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

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) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -18,6 +18,8 @@ export const StyledModal = styled(AntdModal) `
         width: 50px;
         height: 50px;
         line-height: 50px;
+        align-items: center;
+        justify-content: center;
       }
     }
     .antsomi-modal-header {

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ModalProps } from 'antd';
+export interface ModalV2Props extends ModalProps {
+}
+export declare const ModalV2: React.FC<ModalV2Props>;

package/es/components/molecules/ModalV2/ModalV2.js

@@ -0,0 +1,26 @@
+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 from 'react';
+import { StyledModal } from './styled';
+// Components
+import { Button, Flex } from '../../atoms';
+export const ModalV2 = props => {
+    const { okButtonProps, cancelButtonProps, okText, cancelText, onCancel, onOk } = props;
+    const restOfProps = __rest(props, []);
+    return (React.createElement(StyledModal, Object.assign({ footer: React.createElement(Flex, { gap: 10, align: "center" },
+            React.createElement(Button, Object.assign({ type: "primary", onClick: onOk }, okButtonProps), okText || 'OK'),
+            React.createElement(Button, Object.assign({ onClick: onCancel }, cancelButtonProps), cancelText || 'Cancel')) }, restOfProps)));
+};
+ModalV2.defaultProps = {
+// footer,
+};

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

@@ -0,0 +1,2 @@
+export * from './ModalV2';
+export type { ModalProps } from 'antd';

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

@@ -0,0 +1 @@
+export * from './ModalV2';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    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;
+}, any, {}, never>;

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

@@ -0,0 +1,22 @@
+// Libraries
+import { Modal } from 'antd';
+import styled from 'styled-components';
+export const StyledModal = styled(Modal) `
+  .antsomi-modal-content {
+    .antsomi-modal-close {
+      position: absolute;
+      top: 10px !important;
+      right: 10px !important;
+      width: 24px !important;
+      height: 24px !important;
+    }
+
+    .antsomi-modal-body {
+      padding: 15px;
+    }
+
+    .antsomi-modal-header {
+      padding: 15px 15px 0px 15px;
+    }
+  }
+`;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ModalProps } from '../ModalV2';
+export interface PreviewModalProps extends ModalProps {
+    modalHeaderClassName?: string;
+    modalBodyClassName?: string;
+}
+export declare const PreviewModal: React.FC<PreviewModalProps>;

package/es/components/molecules/PreviewModal/PreviewModal.js

@@ -0,0 +1,30 @@
+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 from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { Button, Icon } from '../../atoms';
+// Styled
+import { ModalBody, ModalHeader, StyledModal } from './styled';
+// Utils
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+export const PreviewModal = props => {
+    const { onCancel } = props;
+    const { children, modalHeaderClassName, modalBodyClassName } = props, restProps = __rest(props, ["children", "modalHeaderClassName", "modalBodyClassName"]);
+    const { t } = i18nInstance;
+    return (React.createElement(StyledModal, Object.assign({}, restProps, { centered: true, closeIcon: null, footer: null, width: "100vw" }),
+        React.createElement(ModalHeader, { className: modalHeaderClassName },
+            React.createElement(Button, { className: "close-btn", onClick: onCancel },
+                React.createElement(Icon, { type: "icon-ants-remove-slim", size: 12 }),
+                t(translations.close.title))),
+        React.createElement(ModalBody, { className: modalBodyClassName }, children)));
+};

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

@@ -0,0 +1,2 @@
+export { PreviewModal } from './PreviewModal';
+export type { PreviewModalProps } from './PreviewModal';

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

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

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
+export declare const ModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,39 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { ModalV2 } from '../ModalV2';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+const HEADER_HEIGHT = '50px';
+export const StyledModal = styled(ModalV2) `
+  max-width: 100vw !important;
+
+  .antsomi-modal-content {
+    border-radius: 0px;
+    height: 100vh;
+  }
+
+  .antsomi-modal-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0px !important;
+  }
+`;
+export const ModalHeader = styled(Flex) `
+  height: ${HEADER_HEIGHT};
+  border-bottom: 1px solid #c2cee0;
+  box-shadow: 0px 2px 3px rgba(15, 19, 23, 0.1);
+  flex-shrink: 0;
+
+  .close-btn {
+    position: absolute;
+    right: 15px;
+  }
+`;
+ModalHeader.defaultProps = {
+    align: 'center',
+    justify: 'center',
+};
+export const ModalBody = styled.div.attrs({}) `
+  overflow: auto;
+`;

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { IResizeGridProps } from './types';
+export declare const ResizeGrid: FC<IResizeGridProps>;