@antscorp/antsomi-ui 1.3.3-beta.1 → 1.3.3-beta.2

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

@@ -0,0 +1,95 @@
+/* eslint-disable react/button-has-type */
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import React, { useState, useEffect } from 'react';
+// Components
+import { Icon, Input, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { ColorPickerWrapper } from './styled';
+// Utils
+import { hexWithAlpha } from '@antscorp/antsomi-ui/es/utils/color';
+import CustomPicker from './CustomPicker';
+const styleBtnColor = {
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    margin: 0,
+    marginLeft: 10,
+    padding: 0,
+    fontSize: '100%',
+    border: 'none',
+};
+export const ColorPicker = props => {
+    // Props
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
+    const { onChange = () => { } } = props;
+    // States
+    const [color, setColor] = useState(defaultColor);
+    const [popoverVisible, setPopoverVisible] = useState(false);
+    const [iconNode, setIconNode] = useState();
+    // Effects
+    useEffect(() => {
+        if (props.color) {
+            setColor(props.color);
+        }
+    }, [props.color]);
+    useEffect(() => {
+        if (icon) {
+            if (typeof icon === 'string') {
+                setIconNode(React.createElement(Icon, { type: icon }));
+            }
+            else {
+                setIconNode(icon);
+            }
+        }
+    }, [icon]);
+    // Handlers
+    const onChangeColorPicker = color => {
+        var _a;
+        if (['hsv', 'hsl'].includes(color.source)) {
+            if (!((_a = color === null || color === void 0 ? void 0 : color.rgb) === null || _a === void 0 ? void 0 : _a.a)) {
+                setColor(color.hex);
+                return;
+            }
+        }
+        setColor(hexWithAlpha(color));
+    };
+    const onChangeComplete = color => {
+        var _a;
+        if (['hsv', 'hsl'].includes(color.source)) {
+            if (!((_a = color === null || color === void 0 ? void 0 : color.rgb) === null || _a === void 0 ? void 0 : _a.a)) {
+                onChange(color.hex);
+                return;
+            }
+        }
+        onChange(hexWithAlpha(color));
+    };
+    const onChangeColorInput = event => {
+        const { value } = event.target;
+        setColor(value);
+        onChange(value);
+    };
+    const onPopoverVisibleChange = visible => {
+        setPopoverVisible(visible);
+    };
+    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, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, 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,
+                    height: 20,
+                    border: '2px solid rgb(224 224 224 / 1)',
+                } })))),
+        showInput && positionInput === 'right' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput }))));
+};
+ColorPicker.defaultProps = {
+    className: '',
+    color: '#000000',
+    defaultColor: '#000000',
+    onChange: () => { },
+    showInput: true,
+    positionInput: 'left',
+    style: {},
+};

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

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

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

@@ -0,0 +1,10 @@
+// Libraries
+import styled from 'styled-components';
+export const ColorPickerWrapper = styled.span `
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  width: 100px;
+  margin-right: 10px;
+  margin-left: 10px;
+`;

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

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from 'react';
+import { ColorPickerProps } from '@antscorp/antsomi-ui/es/components/molecules/ColorPicker';
+interface ColorSettingProps extends ColorPickerProps {
+    label: string;
+    labelClassName?: string;
+    labelStyling?: Partial<CSSProperties>;
+    isHideBtnEdit?: boolean;
+    className?: string;
+    vertical?: boolean;
+    customColors?: Array<string>;
+    callback?: (type: 'ON_ADD_NEW_PRESET' | 'ON_EDIT_CLICKED', dataOut?: any) => void;
+}
+export declare const ColorSetting: React.FC<ColorSettingProps>;
+export {};

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

@@ -0,0 +1,97 @@
+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';
+// Molecules
+import { SettingWrapper } from '../SettingWrapper';
+import { ColorPicker, } from '@antscorp/antsomi-ui/es/components/molecules/ColorPicker';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { Button, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { ButtonPreset, PresetColor, PresetWrapper } from './styled';
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/ColorSetting/index.tsx';
+const stylingCenter = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+};
+export const ColorSetting = props => {
+    const { label, color, labelClassName, labelStyling, isHideBtnEdit, customColors, className, vertical, callback, onChange } = props, restOf = __rest(props, ["label", "color", "labelClassName", "labelStyling", "isHideBtnEdit", "customColors", "className", "vertical", "callback", "onChange"]);
+    const onClickPresetColor = (color) => {
+        try {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            typeof onChange === 'function' && onChange(color);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onClickPresetColor',
+                args: { color },
+            });
+        }
+    };
+    const onClickAddNewPresetColor = () => {
+        try {
+            if (color && typeof customColors !== 'undefined' && !(customColors === null || customColors === void 0 ? void 0 : customColors.includes(color))) {
+                const draftCustomColors = [...customColors];
+                draftCustomColors.push(color);
+                if (typeof callback === 'function') {
+                    callback('ON_ADD_NEW_PRESET', { customColors: draftCustomColors });
+                }
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onClickAddNewPresetColor',
+                args: {},
+            });
+        }
+    };
+    const onClickEdit = () => {
+        try {
+            if (typeof callback === 'function') {
+                callback('ON_EDIT_CLICKED');
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onClickEdit',
+                args: {},
+            });
+        }
+    };
+    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"))),
+        React.createElement(PresetWrapper, null,
+            React.createElement(ButtonPreset, { shape: "circle", onClick: onClickAddNewPresetColor },
+                React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 14 } })),
+            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;
+    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: [],
+    isHideBtnEdit: true,
+    callback: () => { },
+    onChange: () => { },
+};

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

@@ -0,0 +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<import("antd").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/ColorSetting/styled.js

@@ -0,0 +1,42 @@
+// Libraries
+import styled from 'styled-components';
+// Image
+import TransparentSvg from '@antscorp/antsomi-ui/es/assets/svg/transparent.svg';
+// Components
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ColorSettingWrapper = styled.div ``;
+export const PresetColor = styled.div `
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  overflow: hidden;
+  cursor: pointer;
+  background: url(${TransparentSvg}) repeat !important;
+
+  .__color {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    z-index: 1;
+    border-radius: 9999px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+  }
+`;
+export const ButtonPreset = styled(Button) `
+  width: 24px !important;
+  height: 24px !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  min-width: fit-content !important;
+`;
+export const PresetWrapper = styled.div `
+  max-height: 100px;
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 10px;
+`;

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

@@ -0,0 +1,8 @@
+import { DatePicker as AntdDatePicker } from 'antd';
+import { AdvancedPicker } from './components/AdvancedPicker';
+import { AdvancedRangePicker } from './components/AdvancedRangePicker';
+export type TDatePicker = typeof AntdDatePicker & {
+    AdvancedPicker: typeof AdvancedPicker;
+    AdvancedRangePicker: typeof AdvancedRangePicker;
+};
+export declare const DatePicker: TDatePicker;

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

@@ -0,0 +1,8 @@
+// Libraries
+import { DatePicker as AntdDatePicker } from 'antd';
+// Components
+import { AdvancedPicker } from './components/AdvancedPicker';
+import { AdvancedRangePicker } from './components/AdvancedRangePicker';
+export const DatePicker = AntdDatePicker;
+DatePicker.AdvancedPicker = AdvancedPicker;
+DatePicker.AdvancedRangePicker = AdvancedRangePicker;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TAdvancedType, TCalculationType, TOperatorKey, TOption, TShowCalculationTypeCondition } from './types';
+export interface AdvancedPickerProps {
+    label?: string;
+    disabled?: boolean;
+    dateTypeKeysShow?: string[];
+    showCalculationTypeCondition?: TShowCalculationTypeCondition;
+    calculationTypeKeysShow?: TCalculationType[];
+    defaultDateTypeKey?: string;
+    valueType?: string;
+    option?: TOption;
+    operatorKey?: TOperatorKey;
+    type?: TAdvancedType;
+    date?: string;
+    format?: string;
+    formatInputDisplay?: string;
+    inputStyle?: React.CSSProperties;
+    disableAfterDate?: string;
+    disableBeforeDate?: string;
+    errorMessage?: string;
+    showTime?: boolean;
+    onUpdatedNewDate?: (newDate: any) => void;
+    onApply?: ({ date, option }: {
+        date: string;
+        option: TOption;
+    }) => void;
+}
+export declare const AdvancedPicker: React.FC<AdvancedPickerProps>;