@antscorp/antsomi-ui 1.3.3-beta.9 → 1.3.4

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

@@ -1,54 +0,0 @@
-import React, { useMemo } from 'react';
-/* Components */
-import { Space, Switch } from '../../atoms';
-import { ColorSetting } from '../ColorSetting';
-import { SliderWithInputNumber } from '../SliderWithInputNumber';
-import { SettingWrapper } from '../SettingWrapper';
-import { SettingWrapperPopover } from '../SettingWrapperPopover';
-import { FontFamilySelect } from '../FontFamilySelect';
-import { FontWeightSelect } from '../FontWeightSelect';
-import { TextTransformSelect } from '../TextTransformSelect';
-import { TextDecorationSelect } from '../TextDecorationSelect';
-import { FONT_SETTING_DEFAULT, FONT_STYLE_DEFAULT } from './constants';
-export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) => {
-    const handleChange = (setting, style) => {
-        if (typeof onChange === 'function') {
-            const newSettings = Object.assign(Object.assign({}, settings), setting);
-            const newStyles = Object.assign(Object.assign({}, styles), style);
-            onChange(newSettings, newStyles);
-        }
-    };
-    const settingMap = useMemo(() => ({
-        fontFamily: (React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: fontFamily => handleChange({ fontFamily }, { fontFamily }) })),
-        color: (React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }, { color: fontColor }) })),
-        fontSize: (React.createElement(SettingWrapper, { label: "Font Size", vertical: true },
-            React.createElement(SliderWithInputNumber, { value: typeof (settings === null || settings === void 0 ? void 0 : settings.fontSize) !== 'undefined' ? +settings.fontSize : 0, onAfterChange: fontSize => handleChange({ fontSize }, { fontSize }) }))),
-        fontWeight: (React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, onChange: fontWeight => handleChange({ fontWeight }, { fontWeight }) })),
-        lineHeight: (React.createElement(SettingWrapper, { label: "Line Height", vertical: true },
-            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.lineHeight) !== 'undefined' ? +settings.lineHeight : 0, min: 1, max: 5, step: 0.1, onAfterChange: lineHeight => handleChange({ lineHeight }, { lineHeight }) }))),
-        letterSpacing: (React.createElement(SettingWrapper, { label: "Letter Spacing", vertical: true },
-            React.createElement(SliderWithInputNumber, { defaultValue: typeof (settings === null || settings === void 0 ? void 0 : settings.letterSpacing) !== 'undefined' ? +settings.letterSpacing : 0, min: -10, max: 10, onAfterChange: letterSpacing => handleChange({ letterSpacing }, { letterSpacing }) }))),
-        textTransform: (React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }, { textTransform }) })),
-        textDecoration: (React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }, { textDecoration }) })),
-        italic: (React.createElement(SettingWrapper, { label: "Font Style Italic" },
-            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }, { fontStyle: fontItalic ? 'italic' : 'normal' }) }))),
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [settings]);
-    const filteredSetting = useMemo(() => {
-        if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
-            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
-        }
-        return showSettings.map(keySetting => settingMap[keySetting]);
-    }, [showSettings, settingMap]);
-    return React.createElement(Space, { direction: "vertical" }, filteredSetting);
-};
-export const FontSetting = (props) => {
-    const { label, settings, styles, wrapperProps, popoverProps, childrenProps, showSettings, onChange, } = props;
-    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
-        React.createElement(FontSettingEdit, Object.assign({ settings: settings, styles: styles, showSettings: showSettings, onChange: onChange }, childrenProps))));
-};
-FontSetting.defaultProps = {
-    settings: FONT_SETTING_DEFAULT,
-    styles: FONT_STYLE_DEFAULT,
-};

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

@@ -1,22 +0,0 @@
-export type TFontSettings = {
-    fontFamily: string;
-    fontColor: string;
-    fontSize: string | number;
-    fontWeight: string | number;
-    lineHeight: string | number;
-    letterSpacing: string | number;
-    textTransform: string | number;
-    textDecoration: string;
-    fontItalic: boolean;
-};
-export type TFontStyles = {
-    fontFamily: string;
-    color: string;
-    fontSize: string | number;
-    fontWeight: string | number;
-    lineHeight: string | number;
-    letterSpacing: string | number;
-    textTransform: string | number;
-    textDecoration: string;
-    fontStyle: string;
-};

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

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

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

@@ -1,28 +0,0 @@
-export declare const OPTION_FONT_WEIGHT: readonly [{
-    readonly label: "Thin";
-    readonly value: "100";
-}, {
-    readonly label: "Extra Light";
-    readonly value: "200";
-}, {
-    readonly label: "Light";
-    readonly value: "300";
-}, {
-    readonly label: "Regular";
-    readonly value: "400";
-}, {
-    readonly label: "Medium";
-    readonly value: "500";
-}, {
-    readonly label: "Semi Bold";
-    readonly value: "600";
-}, {
-    readonly label: "Bold";
-    readonly value: "700";
-}, {
-    readonly label: "Extra Bold";
-    readonly value: "800";
-}, {
-    readonly label: "Black";
-    readonly value: "900";
-}];

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

@@ -1,11 +0,0 @@
-export const OPTION_FONT_WEIGHT = [
-    { label: 'Thin', value: '100' },
-    { label: 'Extra Light', value: '200' },
-    { label: 'Light', value: '300' },
-    { label: 'Regular', value: '400' },
-    { label: 'Medium', value: '500' },
-    { label: 'Semi Bold', value: '600' },
-    { label: 'Bold', value: '700' },
-    { label: 'Extra Bold', value: '800' },
-    { label: 'Black', value: '900' },
-];

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

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

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

@@ -1,39 +0,0 @@
-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 { SettingWrapper } from '../SettingWrapper';
-import { OPTION_FONT_WEIGHT } from './constants';
-export const FontWeightSelect = props => {
-    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
-    const [selected, setSelected] = useState(defaultValue || value);
-    const fontWeightOptions = useMemo(() => {
-        let draftFontFamily = [...OPTION_FONT_WEIGHT];
-        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
-            draftFontFamily = OPTION_FONT_WEIGHT.filter(({ label }) => showOptions.some(font => font === label));
-        }
-        return draftFontFamily;
-    }, [showOptions]);
-    useEffect(() => {
-        setSelected(value === null || value === void 0 ? void 0 : value.toString());
-    }, [value]);
-    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: [...fontWeightOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
-                setSelected(select);
-                handleChange(select);
-            }, showSearch: true }, selectProps))));
-};

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

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

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

@@ -1,59 +0,0 @@
-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/SettingWrapperPopover/index.d.ts

@@ -1,16 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,19 +0,0 @@
-// 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

@@ -1,9 +0,0 @@
-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>;

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

@@ -1,39 +0,0 @@
-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 { SettingWrapper } from '../SettingWrapper';
-import { OPTION_TEXT_TRANSFORM } from './constants';
-export const TextTransformSelect = (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 textTransformOptions = useMemo(() => {
-        let draftFontFamily = [...OPTION_TEXT_TRANSFORM];
-        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
-            draftFontFamily = OPTION_TEXT_TRANSFORM.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: [...textTransformOptions], style: { width: '100%' }, onChange: select => {
-                setSelected(select);
-                handleChange(select);
-            }, showSearch: true }, selectProps))));
-};