@antscorp/antsomi-ui 1.3.3 → 1.3.5-alpha.1

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const Collapse: import("react").ForwardRefExoticComponent<import("antd").CollapseProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Panel: import("react").ForwardRefExoticComponent<import("antd").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+import React from 'react';
+export declare const Collapse: React.ForwardRefExoticComponent<import("antd").CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.ForwardRefExoticComponent<import("antd").CollapsePanelProps & React.RefAttributes<HTMLDivElement>>;
 };

package/es/components/molecules/Collapse/Collapse.js

@@ -1,2 +1,11 @@
+// Libraries
+import React from 'react';
 import { Collapse as AntdCollapse } from 'antd';
+// Icons
+import { Icon } from '../../atoms';
 export const Collapse = AntdCollapse;
+Collapse.defaultProps = {
+    expandIcon({ isActive }) {
+        return (React.createElement(Icon, { type: "icon-ants-expand-more", size: 24, style: { transform: `rotate(${isActive ? -180 : 0}deg)`, color: '#666' } }));
+    },
+};

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

@@ -1 +1 @@
-export declare const ChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const ChromePicker: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/ChromePicker/styled.d.ts

@@ -1 +1 @@
-export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -16,10 +16,8 @@ import { CustomPicker as CustomPickerHOC } from 'react-color';
 import { Saturation, Hue, Alpha, EditableInput } from 'react-color/lib/components/common';
 // Atoms
 import { Button, Divider, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
-// Molecules
-import { InputNumber } from '../../InputNumber';
 // Styled
-import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, } from './styled';
+import { CustomPickerWrapper, HuePointer, PreviewColorPoint, SaturationPointer, EditableInputWrapper, InputNumberWrapper, } from './styled';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorPicker/CustomPicker/index.tsx';
@@ -41,20 +39,21 @@ const rgbaInputStyling = {
 const wrapperStyling = {
     display: 'flex',
     alignItems: 'center',
-    margin: '15px 8px 0',
+    // margin: '15px 8px 0',
+    marginTop: '15px',
     width: '100%',
 };
 const styleContainAlpha = {
     display: 'flex',
     flexDirection: 'column',
     marginLeft: 10,
-    marginRight: 10,
+    // marginRight: 10,
     width: '100%',
 };
 const CustomPicker = props => {
     var _a, _b, _c, _d;
     // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
+    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "isHideAlpha", "onChange", "onChangeComplete", "presetColors"]);
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -79,15 +78,7 @@ const CustomPicker = props => {
             } },
             React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
         React.createElement("div", { style: wrapperStyling },
-            React.createElement(PreviewColorPoint, null,
-                React.createElement("div", { style: {
-                        backgroundColor: props.color,
-                        position: 'absolute',
-                        top: '0px',
-                        right: '0px',
-                        bottom: '0px',
-                        left: '0px',
-                    } })),
+            React.createElement(PreviewColorPoint, { "$color": props.color }),
             React.createElement("div", { style: styleContainAlpha },
                 React.createElement("div", { style: { position: 'relative', width: '100%', height: 12 } },
                     React.createElement(Hue, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))),
@@ -102,17 +93,17 @@ const CustomPicker = props => {
             React.createElement(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }),
             isShowRgbaInput ? (React.createElement("div", { style: rgbaInputStyling },
                 React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('r', value) }),
+                    React.createElement(InputNumberWrapper, { value: (_a = props.rgb) === null || _a === void 0 ? void 0 : _a.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "R")),
                 React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('g', value) }),
+                    React.createElement(InputNumberWrapper, { value: (_b = props.rgb) === null || _b === void 0 ? void 0 : _b.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "G")),
                 React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('b', value) }),
+                    React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                React.createElement("div", { style: rgbaStyling },
-                    React.createElement(InputNumber, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, width: "auto !important", onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
+                !isHideAlpha && (React.createElement("div", { style: rgbaStyling },
+                    React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A"))))) : (React.createElement(EditableInputWrapper, null,
                 React.createElement(EditableInput, { value: props.color, onChange: onChange }),
                 React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
             React.createElement(Button, { onClick: () => {

package/es/components/molecules/ColorPicker/CustomPicker/styled.d.ts

@@ -1,5 +1,9 @@
+/// <reference types="react" />
 export declare const CustomPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SaturationPointer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HuePointer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviewColorPoint: import("styled-components").StyledComponent<"div", any, {
+    $color?: string | undefined;
+}, never>;
 export declare const EditableInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputNumberWrapper: import("styled-components").StyledComponent<import("react").FC<import("../../InputNumber").InputNumberProps>, any, {}, never>;

package/es/components/molecules/ColorPicker/CustomPicker/styled.js

@@ -1,6 +1,8 @@
 var _a, _b, _c, _d, _e, _f;
 // Libraries
 import styled from 'styled-components';
+// Components
+import { InputNumber } from '../../InputNumber';
 // Svg
 import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
 // Constants
@@ -30,12 +32,10 @@ export const HuePointer = styled.div `
   box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
 `;
 export const PreviewColorPoint = styled.div `
-  position: relative;
   width: 36px;
   height: 36px;
-  background: url(${TransparentSvg}) repeat;
+  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
   border-radius: 9999px;
-  overflow: hidden;
   flex-shrink: 0;
 `;
 export const EditableInputWrapper = styled.div `
@@ -91,3 +91,14 @@ export const EditableInputWrapper = styled.div `
     }
   }
 `;
+export const InputNumberWrapper = styled(InputNumber) `
+  & > div {
+    width: unset !important;
+    padding: 0;
+  }
+
+  input {
+    padding: 0 6px !important;
+    text-align: center !important;
+  }
+`;

package/es/components/molecules/ColorPicker/SketchPicker/styled.d.ts

@@ -1 +1 @@
-export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, any, any>;

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

@@ -3,6 +3,7 @@ export interface ColorPickerProps {
     className?: string;
     color?: string;
     presetColors?: any[] | ReactNode;
+    isHideAlpha?: boolean;
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;

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

@@ -21,7 +21,7 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
     const { onChange = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
@@ -72,10 +72,10 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (React.createElement(ColorPickerWrapper, { className: className, style: style },
+    return (React.createElement(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style },
         showInput && positionInput === 'left' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })),
-        React.createElement(Popover, { arrowPointAtCenter: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", visible: popoverVisible, getPopupContainer: triggerNode => triggerNode, onVisibleChange: onPopoverVisibleChange },
-            React.createElement("button", { style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
+        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
+            React.createElement("div", { className: "antsomi-popover-button", style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
                     backgroundColor: color,
                     display: 'block',
                     width: 20,
@@ -88,6 +88,7 @@ ColorPicker.defaultProps = {
     className: '',
     color: '#000000',
     defaultColor: '#000000',
+    isHideAlpha: false,
     onChange: () => { },
     showInput: true,
     positionInput: 'left',

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

@@ -73,7 +73,7 @@ export const ColorSetting = props => {
             });
         }
     };
-    const presetColors = (React.createElement("div", null,
+    const presetColors = customColors ? (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/ColorSetting/styled.d.ts

@@ -1,14 +1,7 @@
 /// <reference types="react" />
 export declare const ColorSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PresetColor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Partial<{
-    href: string;
-    target?: string | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLAnchorElement> | undefined;
-} & import("antd/es/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement | HTMLButtonElement>, "type" | "onClick"> & {
-    htmlType?: "button" | "reset" | "submit" | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
-} & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick">> & import("react").RefAttributes<HTMLElement>> & {
+export declare const ButtonPreset: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;
 export declare const PresetWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/DatePicker/DatePicker.js

@@ -1,8 +1,14 @@
 // Libraries
+import React from 'react';
 import { DatePicker as AntdDatePicker } from 'antd';
 // Components
 import { AdvancedPicker } from './components/AdvancedPicker';
 import { AdvancedRangePicker } from './components/AdvancedRangePicker';
+import { EventIcon } from '../../icons';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const DatePicker = AntdDatePicker;
+DatePicker.defaultProps = {
+    suffixIcon: React.createElement(EventIcon, { width: 20, height: 20, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }),
+};
 DatePicker.AdvancedPicker = AdvancedPicker;
 DatePicker.AdvancedRangePicker = AdvancedRangePicker;

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition } from './types';
+import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition, ValueTypes } from './types';
 export interface AdvancedPickerProps {
     label?: string;
+    valueType?: ValueTypes;
     disabled?: boolean;
     dateTypeKeysShow?: string[];
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     calculationTypeKeysShow?: TCalculationType[];
     defaultDateTypeKey?: string;
-    valueType?: string;
     option?: TOption;
     operatorKey?: TOperatorKey;
     type?: TAdvancedType;
@@ -15,11 +15,17 @@ export interface AdvancedPickerProps {
     format?: string;
     formatInputDisplay?: string;
     inputStyle?: React.CSSProperties;
+    popupStyle?: React.CSSProperties;
     disableAfterDate?: string;
     disableBeforeDate?: string;
     errorMessage?: string;
     showTime?: boolean;
-    onUpdatedNewDate?: (newDate: any) => void;
+    timezone?: string;
+    isViewMode?: boolean;
+    onUpdatedNewDate?: ({ date, option }: {
+        date: string;
+        option: TOption;
+    }) => void;
     onApply?: ({ date, option }: {
         date: string;
         option: TOption;