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

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

@@ -0,0 +1,117 @@
+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;
+};
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import React, { useState } from 'react';
+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';
+// 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';
+const rgbaStyling = {
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+    alignItems: 'center',
+};
+const rgbaInputStyling = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    marginLeft: 5,
+    marginRight: 5,
+    gap: '8px',
+};
+const wrapperStyling = {
+    display: 'flex',
+    alignItems: 'center',
+    // margin: '15px 8px 0',
+    marginTop: '15px',
+    width: '100%',
+};
+const styleContainAlpha = {
+    display: 'flex',
+    flexDirection: 'column',
+    marginLeft: 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"]);
+    // State
+    const [isShowRgbaInput, setShowRgbaInput] = useState(true);
+    const onChangeRgbaColor = (key, value) => {
+        try {
+            const draftRgb = Object.assign(Object.assign({}, props.rgb), { [key]: value });
+            onChange(`rgba(${draftRgb.r}, ${draftRgb.g}, ${draftRgb.b}, ${draftRgb.a})`);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeRgbaColor',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(CustomPickerWrapper, { className: className, style: style },
+        React.createElement("div", { style: {
+                position: 'relative',
+                overflow: 'hidden',
+                width: '100%',
+                height: 143,
+            } },
+            React.createElement(Saturation, Object.assign({}, restOf, { pointer: SaturationPointer, onChange: onChange }))),
+        React.createElement("div", { style: wrapperStyling },
+            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 }))),
+                React.createElement("div", { style: {
+                        position: 'relative',
+                        width: '100%',
+                        height: 12,
+                        marginTop: 10,
+                    } },
+                    React.createElement(Alpha, Object.assign({}, restOf, { pointer: HuePointer, onChange: onChange }))))),
+        React.createElement("div", { style: Object.assign(Object.assign({}, wrapperStyling), { paddingBottom: 15 }) },
+            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(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(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(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(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: () => {
+                    setShowRgbaInput(true);
+                    onChange('rgba(0, 0, 0, 0)');
+                } }, "Clear")),
+        presetColors ? (React.createElement("div", null,
+            React.createElement(Divider, null),
+            presetColors)) : null));
+};
+export default CustomPickerHOC(CustomPicker);

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

@@ -0,0 +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, {
+    $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

@@ -0,0 +1,104 @@
+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
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const CustomPickerWrapper = styled.div `
+  position: relative;
+  width: 260px;
+`;
+export const SaturationPointer = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+  box-shadow: rgb(0 0 0 / 25%) 0px 2px 4px;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+`;
+export const HuePointer = styled.div `
+  width: 14px;
+  height: 14px;
+  border-radius: 6px;
+  background-color: rgb(248, 248, 248);
+  transform: translate(-6px, -1px);
+  box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px;
+`;
+export const PreviewColorPoint = styled.div `
+  width: 36px;
+  height: 36px;
+  background: ${({ $color }) => `linear-gradient(${$color ? `${$color}, ${$color}` : '#fff, #fff'}), url(${TransparentSvg}) repeat`};
+  border-radius: 9999px;
+  flex-shrink: 0;
+`;
+export const EditableInputWrapper = styled.div `
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  input {
+    height: 30px;
+    width: 100%;
+    border-style: none;
+    border-radius: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-family: Roboto;
+    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    --tw-shadow: 0 1px 0 0 #e0e0e0;
+    --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+
+    &::placeholder {
+      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5};
+    }
+
+    &:hover {
+      background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
+    }
+
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    outline-style: none !important;
+
+    &:active,
+    &:focus {
+      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
+      --tw-shadow: 0 1px 0 0 #194e8d;
+      --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow);
+    }
+
+    &:disabled {
+      background-color: ${(_e = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
+      color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5};
+      --tw-shadow: 0 1px 0 0 #e0e0e0;
+      --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow);
+    }
+  }
+`;
+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/index.js

@@ -0,0 +1,5 @@
+// Libraries
+import React from 'react';
+// Styled
+import { SketchPickerWrapper } from './styled';
+export const SketchPicker = props => (React.createElement(SketchPickerWrapper, Object.assign({}, props)));

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

@@ -0,0 +1,10 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { SketchPicker } from 'react-color';
+export const SketchPickerWrapper = styled(SketchPicker) `
+  --tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
+  padding: 0px !important;
+`;

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.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.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;