@antscorp/antsomi-ui 1.3.3-beta.3 → 1.3.3-beta.5

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

@@ -0,0 +1,3 @@
+import { TFontSettings, TFontStyles } from './types';
+export declare const FONT_SETTING_DEFAULT: TFontSettings;
+export declare const FONT_STYLE_DEFAULT: TFontStyles;

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

@@ -0,0 +1,22 @@
+export const FONT_SETTING_DEFAULT = {
+    fontColor: '#000000',
+    fontFamily: 'Roboto',
+    fontItalic: false,
+    fontSize: 14,
+    fontWeight: '400',
+    letterSpacing: 2,
+    lineHeight: 1.5,
+    textTransform: 'none',
+    textDecoration: 'none',
+};
+export const FONT_STYLE_DEFAULT = {
+    color: '#000000',
+    fontFamily: 'Roboto',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    letterSpacing: 2,
+    textTransform: 'none',
+    textDecoration: 'none',
+    fontStyle: 'normal',
+};

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

@@ -2,17 +2,23 @@ import React from 'react';
 import { PopoverProps } from 'antd';
 import { SettingWrapperProps } from '../SettingWrapper';
 import { TFontSettings, TFontStyles } from './types';
+type TFontSettingOptions = 'fontFamily' | 'color' | 'fontSize' | 'fontWeight' | 'textTransform' | 'textDecoration' | 'italic' | 'lineHeight' | 'letterSpacing';
 export type TFontSettingProps = {
     label?: string;
-    settings: TFontSettings;
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
     wrapperProps?: Omit<SettingWrapperProps, 'label'>;
     popoverProps?: Omit<PopoverProps, 'content'>;
     childrenProps?: Omit<TFontSettingEditProps, 'settings' | 'styles' | 'onChange'>;
-    onChange?: TFontSettingEditProps['onChange'];
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
 };
 export type TFontSettingEditProps = {
-    settings: TFontSettings;
-    onChange?: (settings: Partial<TFontSettings>, styles?: TFontStyles) => void;
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
 };
 export declare const FontSettingEdit: React.FC<TFontSettingEditProps>;
 export declare const FontSetting: React.FC<TFontSettingProps>;
+export {};

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 /* Components */
 import { Space, Switch } from '../../atoms';
 import { ColorSetting } from '../ColorSetting';
@@ -9,45 +9,46 @@ import { FontFamilySelect } from '../FontFamilySelect';
 import { FontWeightSelect } from '../FontWeightSelect';
 import { TextTransformSelect } from '../TextTransformSelect';
 import { TextDecorationSelect } from '../TextDecorationSelect';
-export const FontSettingEdit = (props) => {
-    const { settings, onChange } = props;
-    const generateStyles = (settings) => ({
-        fontFamily: settings.fontFamily,
-        fontColor: settings.fontColor,
-        fontSize: settings.fontSize,
-        fontWeight: settings.fontWeight,
-        lineHeight: settings.lineHeight,
-        letterSpacing: settings.letterSpacing,
-        textTransform: settings.textTransform,
-        textDecoration: settings.textDecoration,
-        fontStyle: settings.fontItalic ? 'italic' : 'normal',
-    });
-    const handleChange = (setting) => {
+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 = generateStyles(newSettings);
+            const newStyles = Object.assign(Object.assign({}, styles), style);
             onChange(newSettings, newStyles);
         }
     };
-    return (React.createElement(Space, { direction: "vertical" },
-        React.createElement(FontFamilySelect, { label: "Font Family", value: settings === null || settings === void 0 ? void 0 : settings.fontFamily, onChange: family => handleChange({ fontFamily: family }) }),
-        React.createElement(ColorSetting, { label: "Font Color", color: settings === null || settings === void 0 ? void 0 : settings.fontColor, onChange: fontColor => handleChange({ fontColor }) }),
-        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 }) })),
-        React.createElement(FontWeightSelect, { label: "Font Weight", value: settings === null || settings === void 0 ? void 0 : settings.fontWeight, showOptions: ['Light', 'Black'], onChange: fontWeight => handleChange({ fontWeight }) }),
-        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 }) })),
-        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 }) })),
-        React.createElement(TextTransformSelect, { label: "Text Transform", value: settings === null || settings === void 0 ? void 0 : settings.textTransform, onChange: textTransform => handleChange({ textTransform }) }),
-        React.createElement(TextDecorationSelect, { label: "Text Decoration", value: settings === null || settings === void 0 ? void 0 : settings.textDecoration, onChange: textDecoration => handleChange({ textDecoration }) }),
-        React.createElement(SettingWrapper, { label: "Font Style Italic" },
-            React.createElement(Switch, { checked: settings === null || settings === void 0 ? void 0 : settings.fontItalic, onChange: fontItalic => handleChange({ fontItalic }) }))));
+    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, wrapperProps, popoverProps, childrenProps, onChange } = props;
-    return (React.createElement(SettingWrapperPopover, { label: label !== null && label !== void 0 ? label : 'Font Settings', 
-        //   labelStyle={{ fontWeight: 'bold', ...wrapperProps?.labelStyle }}
-        popoverProps: Object.assign({ overlayStyle: { top: 0 }, placement: 'bottomRight' }, popoverProps), wrapperProps: Object.assign({ containerStyle: { minWidth: '288px' } }, wrapperProps) },
-        React.createElement(FontSettingEdit, Object.assign({ settings: settings, onChange: onChange }, childrenProps))));
+    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

@@ -11,7 +11,7 @@ export type TFontSettings = {
 };
 export type TFontStyles = {
     fontFamily: string;
-    fontColor: string;
+    color: string;
     fontSize: string | number;
     fontWeight: string | number;
     lineHeight: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.3",
+  "version": "1.3.3-beta.5",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -19,6 +19,7 @@
   "unpkg": "dist/index.js",
   "types": "es/index.d.ts",
   "scripts": {
+    "publish": "npm run clean && npm run build:es",
     "build:es": "npm run copy-files && npm run ts-compile",
     "clean": "rimraf dist lib es",
     "dev": "vite",