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

package/es/components/molecules/ResizeGrid/components/Cell/styled.js

@@ -0,0 +1,62 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledCell = styled.div `
+  border: ${props => props.borderStyle};
+  border-top: none;
+  border-left: none;
+  position: relative;
+  user-select: none;
+
+  .resize-top,
+  .resize-right,
+  .resize-bottom,
+  .resize-left {
+    position: absolute;
+  }
+
+  .resize-top,
+  .resize-bottom {
+    width: 100%;
+    height: 2px;
+    left: -1px;
+    cursor: row-resize;
+  }
+  .resize-left,
+  .resize-right {
+    width: 2px;
+    height: 100%;
+    top: -1px;
+    cursor: col-resize;
+  }
+
+  .resize-top {
+    // background: red;
+    top: -1px;
+  }
+  .resize-right {
+    // background: green;
+    right: -1px;
+  }
+  .resize-bottom {
+    // background: blue;
+    bottom: -1px;
+  }
+  .resize-left {
+    // background: yellow;
+    left: -1px;
+  }
+  .imageWrapper {
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+      -webkit-user-drag: none;
+    }
+  }
+`;

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

@@ -0,0 +1,34 @@
+import { TGrid } from './types';
+export declare const GRID_TEMPLATE: {
+    GRID_2_3: {
+        rows: number;
+        cols: number;
+    };
+    GRID_5_5: {
+        rows: number;
+        cols: number;
+    };
+    GRID_2_2: {
+        rows: number;
+        cols: number;
+    };
+    GRID_2_3_1: {
+        rows: number;
+        cols: number;
+        childs: ({
+            rowStart: number;
+            colStart: number;
+            colEnd: number;
+        } | {
+            rowStart: number;
+            colStart: number;
+            colEnd?: undefined;
+        })[];
+    };
+};
+export declare const buildCell: (cell: any) => any;
+export declare const buildGrid: (grid: Partial<TGrid>) => TGrid;
+export declare const buildGridArea: (box: any) => string;
+export declare const buildTranform: (box: any) => string;
+export declare const MIN_SIZE = 32;
+export declare const getSafety: (fn: any, defaultValue?: string) => any;

package/es/components/molecules/ResizeGrid/constant.js

@@ -0,0 +1,108 @@
+export const GRID_TEMPLATE = {
+    GRID_2_3: {
+        rows: 2,
+        cols: 3,
+    },
+    GRID_5_5: {
+        rows: 5,
+        cols: 5,
+    },
+    GRID_2_2: {
+        rows: 2,
+        cols: 2,
+    },
+    GRID_2_3_1: {
+        rows: 2,
+        cols: 3,
+        childs: [
+            {
+                rowStart: 1,
+                colStart: 1,
+                colEnd: 4,
+            },
+            {
+                rowStart: 2,
+                colStart: 1,
+            },
+            {
+                rowStart: 2,
+                colStart: 2,
+            },
+            {
+                rowStart: 2,
+                colStart: 3,
+            },
+        ],
+    },
+};
+export const buildCell = cell => (Object.assign({ rowEnd: cell.rowEnd || cell.rowStart + 1, colEnd: cell.colEnd || cell.colStart + 1 }, cell));
+export const buildGrid = (grid) => {
+    let childs = [];
+    let buildCol = !grid.gridTemplateColumns || !grid.gridTemplateColumns.length;
+    const buildRow = !grid.gridTemplateRows || !grid.gridTemplateRows.length;
+    const buildChild = !grid.childs || !grid.childs.length;
+    const gridTemplateColumns = grid.gridTemplateColumns || [];
+    const gridTemplateRows = grid.gridTemplateRows || [];
+    if (!buildChild && grid.childs) {
+        childs = grid.childs.map(buildCell);
+    }
+    if (buildChild || buildRow || buildCol) {
+        Array(grid.rows)
+            .fill(1)
+            .forEach((_, row) => {
+            if (buildRow && grid.rows) {
+                gridTemplateRows.push(100 / grid.rows);
+            }
+            Array(grid.cols)
+                .fill(1)
+                .forEach((__, col) => {
+                if (buildChild) {
+                    childs.push({
+                        rowStart: row + 1,
+                        rowEnd: row + 2,
+                        colStart: col + 1,
+                        colEnd: col + 2,
+                        // image: {
+                        //   imageStyles: {},
+                        //   imageSettings: {},
+                        //   imageUrl: 'https://source.unsplash.com/random/300×300'
+                        // },
+                        objectFit: 'contain',
+                    });
+                }
+                if (buildCol && grid.cols) {
+                    gridTemplateColumns.push(100 / grid.cols);
+                }
+            });
+            buildCol = false;
+        });
+    }
+    return Object.assign(Object.assign({ rows: grid.rows || 1, cols: grid.rows || 1 }, grid), { gridTemplateColumns,
+        gridTemplateRows,
+        childs });
+};
+export const buildGridArea = box => 
+// console.log('area', box, `${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`)
+`${box.rowStart} / ${box.colStart} / ${box.rowEnd} / ${box.colEnd}`;
+export const buildTranform = box => {
+    const { transformX, transformY } = box;
+    if (transformX && transformY) {
+        return `translate(${transformX}px, ${transformY}px)`;
+    }
+    if (transformX) {
+        return `translateX(${transformX}px)`;
+    }
+    if (transformY) {
+        return `translateY(${transformY}px)`;
+    }
+    return 'unset';
+};
+export const MIN_SIZE = 32;
+export const getSafety = (fn, defaultValue = '') => {
+    try {
+        return fn();
+    }
+    catch (e) {
+        return defaultValue;
+    }
+};

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

@@ -0,0 +1,2 @@
+export { ResizeGrid } from './ResizeGrid';
+export type { TGrid, TCell, IResizeGridProps } from './types';

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

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

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

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

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

@@ -0,0 +1,20 @@
+// Libraries
+import styled from 'styled-components';
+export const StyledGrid = styled.div `
+  width: 100%;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .grid-container {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    background-repeat: no-repeat;
+    background-position: top left;
+    background-size: 100% 100%;
+    aspect-ratio: ${props => (props.isCompact ? '3 / 1' : '3 / 2')};
+  }
+`;

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

@@ -0,0 +1,128 @@
+/// <reference types="react" />
+export type TImageStyles = {
+    borderTopLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderBottomRightRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderTopWidth?: string;
+    borderRightWidth?: string;
+    borderBottomWidth?: string;
+    borderLeftWidth?: string;
+    borderStyle?: string;
+    borderColor?: string;
+    boxShadow?: string;
+    opacity?: number;
+    width?: string;
+    height?: string;
+    objectPosition?: string;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+};
+export type TImageSettings = {
+    borderRadiusStyle?: string;
+    borderRadiusSuffix?: string;
+    linkedBorderRadiusInput?: boolean;
+    linkedBorderWidthInput?: boolean;
+    linkedPaddingInput?: boolean;
+    paddingSuffix?: string;
+    boxShadowStyle?: string;
+    boxShadowColor?: string;
+    boxShadowBlur?: string;
+    boxShadowSpread?: string;
+    boxShadowHorizontal?: string;
+    boxShadowVertical?: string;
+    boxShadowInset?: boolean;
+    widthSuffix?: string;
+    heightSuffix?: string;
+};
+export type TImage = {
+    imageUrl: string;
+    imageStyles: TImageStyles;
+    imageSettings: TImageSettings;
+};
+export type TCell = {
+    rowStart: number;
+    rowEnd: number;
+    colStart: number;
+    colEnd: number;
+    width?: number;
+    height?: number;
+    transformX?: number;
+    transformY?: number;
+    movedTop?: boolean;
+    movedRight?: boolean;
+    movedBottom?: boolean;
+    movedLeft?: boolean;
+    image?: TImage;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    active?: boolean;
+};
+export interface CellProps {
+    cell: TCell;
+    idx: number;
+    down: Function;
+    downCell: Function;
+    up: Function;
+    setRef: Function;
+    downSelect: Function;
+    upSelect: Function;
+    hoverSelect: Function;
+    unMerge: Function;
+    renderCell?: Function;
+    borderStyle?: string;
+    style?: React.CSSProperties;
+    activeStyle?: React.CSSProperties;
+    isPreviewMode?: boolean;
+}
+export type TGrid = {
+    rows: number;
+    cols: number;
+    gridTemplateColumns: number[];
+    gridTemplateRows: number[];
+    childs: TCell[];
+};
+export type TStartRef = {
+    clientX: number;
+    clientY: number;
+    type: 'row' | 'column';
+    line: number;
+};
+export type TCellExtend = TCell & {
+    cellRef: React.RefObject<HTMLElement>;
+    idx: number;
+};
+export type TStartCellRef = {
+    clientX: number;
+    clientY: number;
+    idx: number;
+    direction: 'top' | 'right' | 'bottom' | 'left';
+    isRevert: boolean;
+    cell: TCellExtend;
+    nextCell: TCellExtend;
+};
+export type TSelected = {
+    idx: number;
+    cell: TCell;
+};
+export type TSelectedEnd = {
+    cell: TCell;
+    idx: number;
+    hCells: number[];
+};
+export interface IResizeGridProps {
+    grid?: Partial<TGrid>;
+    renderCell?: Function;
+    onChangeGrid?: Function;
+    image?: string;
+    imageSize?: string;
+    imagePosition?: string;
+    cellStyle?: React.CSSProperties;
+    isPreviewMode?: boolean;
+    cellBorderStyle?: string;
+    cellActiveStyle?: React.CSSProperties;
+    containerStyle?: React.CSSProperties;
+    isCompact?: boolean;
+}

package/es/components/molecules/ResizeGrid/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,9 @@
 import { SelectProps as AntdSelectProps } from 'antd';
 import React from 'react';
+import { TextProps } from '../../atoms/Text';
 export interface SelectProps extends AntdSelectProps {
+    label?: string | React.ReactNode;
+    labelProps?: TextProps;
 }
 declare const Select: (<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: AntdSelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;

package/es/components/molecules/Select/Select.js

@@ -1,11 +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;
+};
 var _a;
 // Libraries
 import { Select as AntdSelect } from 'antd';
 import React from 'react';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Text } from '../../atoms/Text';
 // Icons
 import Icon from '@antscorp/icons';
 // Constants
-import { THEME } from '../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Styled
 import { StyledTag, TagCloseBtn } from './styled';
 const tagRender = (props) => {
     const { label, closable, onClose } = props;
@@ -18,11 +33,17 @@ const tagRender = (props) => {
                     fontSize: 10,
                 } })) }, label));
 };
-const CustomSelect = props => React.createElement(AntdSelect, Object.assign({}, props));
+const CustomSelect = props => {
+    const { label, labelProps } = props, rest = __rest(props, ["label", "labelProps"]);
+    return (React.createElement(Flex, { vertical: true, gap: 4 },
+        typeof label === 'string' ? React.createElement(Text, Object.assign({}, labelProps), label) : label,
+        React.createElement(AntdSelect, Object.assign({}, rest))));
+};
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;
 Select.Option = AntdSelect.Option;
 Select.defaultProps = {
+    labelProps: { color: '#66666' },
     suffixIcon: (React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 16, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw10 } })),
     tagRender,
 };

package/es/components/molecules/Select/Test.d.ts

@@ -1,2 +1,3 @@
-declare const SelectTest: () => JSX.Element;
+import React from 'react';
+declare const SelectTest: () => React.JSX.Element;
 export default SelectTest;

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

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-interface SettingWrapperProps {
+export interface SettingWrapperProps {
     label: string;
     className?: string;
     labelColor?: string;
@@ -10,4 +10,3 @@ interface SettingWrapperProps {
     children?: React.ReactNode;
 }
 export declare const SettingWrapper: React.FC<SettingWrapperProps>;
-export {};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SettingWrapperProps } from '../SettingWrapper';
+import { PopoverProps } from 'antd';
+export type SettingWrapperPopoverProps = {
+    label: string;
+    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
+    popoverProps?: Omit<PopoverProps, 'content'>;
+    iconPopover?: React.ReactNode;
+};
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export declare const SettingWrapperPopover: React.FC<React.PropsWithChildren<SettingWrapperPopoverProps>>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SettingWrapper } from '../SettingWrapper';
+import { Button, Icon, Popover } from '../../atoms';
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover, }) => {
+    var _a, _b;
+    return (React.createElement(SettingWrapper, Object.assign({ label: label, labelStyle: Object.assign({ fontWeight: 'bold' }, ((_a = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.labelStyle) !== null && _a !== void 0 ? _a : {})) }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {})),
+        React.createElement(Popover, Object.assign({ content: children, trigger: ['click'], overlayInnerStyle: Object.assign({ padding: '12px 16px', minWidth: 288, maxHeight: '90vh', overflow: 'auto' }, ((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overlayInnerStyle) !== null && _b !== void 0 ? _b : {})) }, (popoverProps !== null && popoverProps !== void 0 ? popoverProps : {})), iconPopover)));
+};
+SettingWrapperPopover.defaultProps = {
+    iconPopover: React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" }),
+};

package/es/components/molecules/TextDecorationSelect/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const OPTION_TEXT_DECORATION: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Underline";
+    readonly value: "underline";
+}, {
+    readonly label: "Overline";
+    readonly value: "overline";
+}, {
+    readonly label: "Line Through";
+    readonly value: "line-through";
+}, {
+    readonly label: "Underline - Overline";
+    readonly value: "underline overline";
+}, {
+    readonly label: "Underline - Line Through";
+    readonly value: "underline line-through";
+}];

package/es/components/molecules/TextDecorationSelect/constants.js

@@ -0,0 +1,26 @@
+export const OPTION_TEXT_DECORATION = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Underline',
+        value: 'underline',
+    },
+    {
+        label: 'Overline',
+        value: 'overline',
+    },
+    {
+        label: 'Line Through',
+        value: 'line-through',
+    },
+    {
+        label: 'Underline - Overline',
+        value: 'underline overline',
+    },
+    {
+        label: 'Underline - Line Through',
+        value: 'underline line-through',
+    },
+];

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+export type TextDecorationSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_DECORATION)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_DECORATION)[number]['value']) => void;
+};
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export declare const TextDecorationSelect: React.FC<TextDecorationSelectProps>;

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

@@ -0,0 +1,45 @@
+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;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+import { SettingWrapper } from '../SettingWrapper';
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export const TextDecorationSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textDecorationOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_DECORATION];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_DECORATION.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textDecorationOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

package/es/components/molecules/TextTransformSelect/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const OPTION_TEXT_TRANSFORM: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Capitalize";
+    readonly value: "capitalize";
+}, {
+    readonly label: "Uppercase";
+    readonly value: "uppercase";
+}, {
+    readonly label: "Lowercase";
+    readonly value: "lowercase";
+}];

package/es/components/molecules/TextTransformSelect/constants.js

@@ -0,0 +1,19 @@
+// export const LABEL_TEXT_TRANSFORM = 'None' || 'Capitalize' || 'Uppercase' || 'Lowercase';
+export const OPTION_TEXT_TRANSFORM = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Capitalize',
+        value: 'capitalize',
+    },
+    {
+        label: 'Uppercase',
+        value: 'uppercase',
+    },
+    {
+        label: 'Lowercase',
+        value: 'lowercase',
+    },
+];

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export type TextTransformSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_TRANSFORM)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_TRANSFORM)[number]['value']) => void;
+};
+export declare const TextTransformSelect: React.FC<TextTransformSelectProps>;