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

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

@@ -0,0 +1,70 @@
+// Libraries
+import dayjs from 'dayjs';
+import React from 'react';
+import omit from 'lodash/omit';
+import isEqual from 'react-fast-compare';
+// Atoms
+import { Space } from '../../../../atoms';
+// Molecules
+import { AdvancedPicker } from '../AdvancedPicker';
+// Constants
+import { ADVANCED_RANGE_PICKER_FORMAT } from './constants';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
+export const AdvancedRangePicker = props => {
+    // const { t } = useTranslation();
+    const { t } = i18nInstance;
+    // Props
+    const { timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
+    // Handles
+    const onUpdateTimeRange = (key, params, mode = 'user') => {
+        try {
+            if (typeof onChange === 'function') {
+                const newTimeRange = Object.assign(Object.assign({}, timeRange), { [key]: Object.assign(Object.assign({}, timeRange[key]), params) });
+                if (!isEqual(newTimeRange, timeRange)) {
+                    onChange({
+                        timeRange: newTimeRange,
+                        mode,
+                    });
+                }
+            }
+        }
+        catch (error) {
+            // Handle Error
+            handleError(error, {
+                path: PATH,
+                name: 'onUpdateTimeRange',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(Space, { size: 20 },
+        React.createElement(AdvancedPicker, { disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: date => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
+        React.createElement(AdvancedPicker, { disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, onUpdatedNewDate: date => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
+};
+AdvancedRangePicker.defaultProps = {
+    timeRange: {
+        startDate: {
+            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.startDate),
+            calculationDate: 'years',
+            value: 1,
+            calculationType: 'minus',
+            dateType: 'today',
+        },
+        endDate: {
+            date: dayjs().format(ADVANCED_RANGE_PICKER_FORMAT.endDate),
+            calculationDate: 'days',
+            value: 1,
+            calculationType: 'minus',
+            dateType: 'today',
+        },
+    },
+    errorMessage: '',
+    disabled: false,
+    showLabel: true,
+    showTime: true,
+};

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

@@ -0,0 +1,4 @@
+export const ADVANCED_RANGE_PICKER_FORMAT = {
+    startDate: 'YYYY-MM-DD 00:00:00',
+    endDate: 'YYYY-MM-DD 23:59:59',
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const Drawer: any;

package/es/components/molecules/Drawer/Drawer.js

@@ -0,0 +1,2 @@
+import { Drawer as AntdDrawer } from 'antd';
+export const Drawer = AntdDrawer;

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

@@ -0,0 +1,192 @@
+// Libraries
+import React, { memo, useEffect, useState } from 'react';
+import classNames from 'classnames';
+// Atoms
+import { DividerPure, Icon, Text, InputNumber } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { EdgeSettingContent, EdgeSettingHeader, EdgeSettingWrapper } from './styled';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+// Types
+import { AlignEdit } from '../AlignSetting';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const UNIT = {
+    PX: {
+        value: 'px',
+        label: 'PX',
+    },
+    PERCENT: {
+        value: '%',
+        label: '%',
+    },
+};
+const PATH = '@antscorp/antsomi-ui/es/components/molecules/EdgeSetting/index.tsx';
+export const EdgeSetting = memo(props => {
+    var _a, _b, _c;
+    const { label, values, minValue, maxValue, edgeLabels = [], edgeLabelClassName, contentClassName, unit, linked = false, onChange = () => { }, align, disabledLinked = false, } = props;
+    // State
+    const [state, setState] = useState({
+        values: [0, 0, 0, 0],
+        unit: null,
+        linked: false,
+        lastValueFocus: 0,
+        align: null,
+    });
+    useEffect(() => {
+        setState(state => (Object.assign(Object.assign({}, state), { values,
+            unit,
+            linked, align: align })));
+    }, [values, unit, linked, align]);
+    // Handlers
+    const onChangeState = (key, value) => {
+        try {
+            let draftValues = [...state.values];
+            let draftLinked = state.linked;
+            const draftAlign = state.align;
+            // Case linked is true set all value is exam
+            if (key === 'linked') {
+                if (state.align) {
+                    // disabled
+                    return;
+                }
+                if (!state.linked) {
+                    draftValues = draftValues.map(() => state.lastValueFocus);
+                }
+            }
+            // Case align set linked = false & set values
+            if (key === 'align') {
+                draftLinked = false;
+                draftValues = draftValues.map(value => (value === 'auto' ? 0 : value));
+                if (value === state.align) {
+                    // reset align value
+                    value = '';
+                }
+                else {
+                    if (value === 'left') {
+                        // change values right to auto
+                        draftValues[1] = 'auto';
+                    }
+                    else if (value === 'right') {
+                        // change values left to auto
+                        draftValues[3] = 'auto';
+                    }
+                    else if (value === 'center') {
+                        // change values right + left to auto
+                        draftValues[1] = 'auto';
+                        draftValues[3] = 'auto';
+                    }
+                }
+            }
+            setState(state => (Object.assign(Object.assign({}, state), { values: draftValues, [key]: value })));
+            // Callback onchange
+            onChange({
+                values: draftValues,
+                unit: state.unit,
+                align: draftAlign,
+                linked: draftLinked,
+                [key]: value,
+            });
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeState',
+                args: {},
+            });
+        }
+    };
+    const onChangeValue = (value, index) => {
+        try {
+            let draftValues = [...state.values];
+            if (state.linked) {
+                draftValues = draftValues.map(() => value);
+            }
+            else {
+                draftValues[index] = value;
+            }
+            setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: value })));
+            onChangeState('values', draftValues);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeValue',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(EdgeSettingWrapper, null,
+        React.createElement(EdgeSettingHeader, null,
+            React.createElement(Text, { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, label),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    marginLeft: 12,
+                    marginRight: 12,
+                } },
+                state.align !== null ? (React.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 8,
+                        marginRight: 8,
+                    } },
+                    React.createElement(AlignEdit, { align: state.align, onChange: value => onChangeState('align', value) }),
+                    React.createElement(DividerPure, { type: "vertical", dot: true, height: 12 }))) : null,
+                state.unit ? (React.createElement("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        marginLeft: 8,
+                        marginRight: 8,
+                        // borderRight: '2px dashed #D2D2D2',
+                        height: 18,
+                    } },
+                    Object.values(UNIT).map(({ value, label }, index) => {
+                        var _a, _b;
+                        return (React.createElement(Text, { key: value, style: {
+                                color: state.unit === value
+                                    ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary
+                                    : state.unit !== value
+                                        ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon
+                                        : 'inherit',
+                                fontWeight: state.unit === value ? 'bold' : 'normal',
+                                marginLeft: Object.values(UNIT).length - 1 === index ? 6 : 0,
+                                cursor: 'pointer',
+                                paddingRight: value === '%' ? 8 : 0,
+                            }, onClick: () => onChangeState('unit', value) }, label));
+                    }),
+                    React.createElement("div", { style: {
+                            width: 2,
+                            height: 24,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        } },
+                        React.createElement(Icon, { type: "icon-ants-vertical-dots", style: { fontSize: '30px' }, color: "#D2D2D2" })))) : null,
+                React.createElement(Icon, { type: `icon-ants-${state.linked ? 'hyperlink' : 'hyperlink-off'}`, size: 18, style: {
+                        cursor: 'pointer',
+                        color: !state.linked ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon : (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary,
+                    }, onClick: disabledLinked ? () => { } : () => onChangeState('linked', !state.linked), disabled: disabledLinked ? true : !!state.align }))),
+        React.createElement(EdgeSettingContent, { className: contentClassName }, state.values.map((value, index) => {
+            var _a;
+            if (!edgeLabels[index]) {
+                return null;
+            }
+            return (React.createElement("div", { key: edgeLabels[index] },
+                React.createElement(Text, { className: classNames(edgeLabelClassName), style: { marginBottom: 5, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon } }, edgeLabels[index]),
+                value !== 'auto' ? (React.createElement(InputNumber, { disabled: state.linked && index !== 0, value: value, required: true, min: minValue, max: maxValue, onFocus: e => {
+                        const { value = '' } = e.target;
+                        setState(state => (Object.assign(Object.assign({}, state), { lastValueFocus: +value })));
+                    }, onChange: val => onChangeValue(val, index) })) : (React.createElement(Text, { size: "medium", className: "custom-text-auto", style: { marginTop: 8, fontSize: '12px' } }, "AUTO"))));
+        }))));
+});
+EdgeSetting.defaultProps = {
+    label: '',
+    values: [0, 0, 0, 0],
+    minValue: 0,
+    maxValue: 9999,
+    edgeLabels: ['Top', 'Right', 'Bottom', 'Left'],
+    unit: null,
+    align: null,
+};

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

@@ -0,0 +1,18 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constant
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const EdgeSettingWrapper = styled.div `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon} !important;
+`;
+export const EdgeSettingHeader = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const EdgeSettingContent = styled.div `
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 8px;
+`;

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

@@ -0,0 +1,307 @@
+export declare const OPTION_FONT_FAMILY: readonly [{
+    readonly label: "Arial";
+    readonly value: "Arial";
+    readonly style: {
+        readonly fontFamily: "Arial";
+    };
+}, {
+    readonly label: "Sacramento";
+    readonly value: "Sacramento";
+    readonly style: {
+        readonly fontFamily: "Sacramento";
+    };
+}, {
+    readonly label: "PT Serif";
+    readonly value: "PT Serif";
+    readonly style: {
+        readonly fontFamily: "PT Serif";
+    };
+}, {
+    readonly label: "Georgia";
+    readonly value: "Georgia";
+    readonly style: {
+        readonly fontFamily: "Georgia";
+    };
+}, {
+    readonly label: "Helvetica";
+    readonly value: "Helvetica";
+    readonly style: {
+        readonly fontFamily: "Helvetica";
+    };
+}, {
+    readonly label: "Helvetica Neue";
+    readonly value: "Helvetica Neue";
+    readonly style: {
+        readonly fontFamily: "Helvetica Neue";
+    };
+}, {
+    readonly label: "Lucida Grande";
+    readonly value: "Lucida Grande";
+    readonly style: {
+        readonly fontFamily: "Lucida Grande";
+    };
+}, {
+    readonly label: "Tahoma";
+    readonly value: "Tahoma";
+    readonly style: {
+        readonly fontFamily: "Tahoma";
+    };
+}, {
+    readonly label: "Times New Roman";
+    readonly value: "Times New Roman";
+    readonly style: {
+        readonly fontFamily: "Times New Roman";
+    };
+}, {
+    readonly label: "Verdana";
+    readonly value: "Verdana";
+    readonly style: {
+        readonly fontFamily: "Verdana";
+    };
+}, {
+    readonly label: "Abril Fatface";
+    readonly value: "Abril Fatface";
+    readonly style: {
+        readonly fontFamily: "Abril Fatface";
+    };
+}, {
+    readonly label: "Aleo";
+    readonly value: "Aleo";
+    readonly style: {
+        readonly fontFamily: "Aleo";
+    };
+}, {
+    readonly label: "Arvo";
+    readonly value: "arvo";
+    readonly style: {
+        readonly fontFamily: "Arvo";
+    };
+}, {
+    readonly label: "Bitter";
+    readonly value: "bitter";
+    readonly style: {
+        readonly fontFamily: "Bitter";
+    };
+}, {
+    readonly label: "Bree Serif";
+    readonly value: "Bree Serif";
+    readonly style: {
+        readonly fontFamily: "Bree Serif";
+    };
+}, {
+    readonly label: "Cabin";
+    readonly value: "Cabin";
+    readonly style: {
+        readonly fontFamily: "Cabin";
+    };
+}, {
+    readonly label: "Cookie";
+    readonly value: "Cookie";
+    readonly style: {
+        readonly fontFamily: "Cookie";
+    };
+}, {
+    readonly label: "Delius Swash Caps";
+    readonly value: "Delius Swash Caps";
+    readonly style: {
+        readonly fontFamily: "Delius Swash Caps";
+    };
+}, {
+    readonly label: "Dosis";
+    readonly value: "Dosis";
+    readonly style: {
+        readonly fontFamily: "Dosis";
+    };
+}, {
+    readonly label: "Droid Sans";
+    readonly value: "Droid Sans";
+    readonly style: {
+        readonly fontFamily: "Droid Sans";
+    };
+}, {
+    readonly label: "Droid Serif";
+    readonly value: "Droid Serif";
+    readonly style: {
+        readonly fontFamily: "Droid Serif";
+    };
+}, {
+    readonly label: "EB Garamond";
+    readonly value: "EB Garamond";
+    readonly style: {
+        readonly fontFamily: "EB Garamond";
+    };
+}, {
+    readonly label: "Josefin Slab";
+    readonly value: "Josefin Slab";
+    readonly style: {
+        readonly fontFamily: "Josefin Slab";
+    };
+}, {
+    readonly label: "Just Another Hand";
+    readonly value: "Just Another Hand";
+    readonly style: {
+        readonly fontFamily: "Just Another Hand";
+    };
+}, {
+    readonly label: "Lakki Reddy";
+    readonly value: "Lakki Reddy";
+    readonly style: {
+        readonly fontFamily: "Lakki Reddy";
+    };
+}, {
+    readonly label: "Lato";
+    readonly value: "Lato";
+    readonly style: {
+        readonly fontFamily: "Lato";
+    };
+}, {
+    readonly label: "Libre Baskerville";
+    readonly value: "Libre Baskerville";
+    readonly style: {
+        readonly fontFamily: "Libre Baskerville";
+    };
+}, {
+    readonly label: "Lobster";
+    readonly value: "Lobster";
+    readonly style: {
+        readonly fontFamily: "Lobster";
+    };
+}, {
+    readonly label: "Lora";
+    readonly value: "Lora";
+    readonly style: {
+        readonly fontFamily: "Lora";
+    };
+}, {
+    readonly label: "Mali";
+    readonly value: "Mali";
+    readonly style: {
+        readonly fontFamily: "Mali";
+    };
+}, {
+    readonly label: "Merriweather";
+    readonly value: "Merriweather";
+    readonly style: {
+        readonly fontFamily: "Merriweather";
+    };
+}, {
+    readonly label: "Montserrat";
+    readonly value: "Montserrat";
+    readonly style: {
+        readonly fontFamily: "Montserrat";
+    };
+}, {
+    readonly label: "Noto Sans";
+    readonly value: "Noto Sans";
+    readonly style: {
+        readonly fontFamily: "Noto Sans";
+    };
+}, {
+    readonly label: "Noto Serif";
+    readonly value: "Noto Serif";
+    readonly style: {
+        readonly fontFamily: "Noto Serif";
+    };
+}, {
+    readonly label: "Nunito";
+    readonly value: "Nunito";
+    readonly style: {
+        readonly fontFamily: "Nunito";
+    };
+}, {
+    readonly label: "Open Sans";
+    readonly value: "Open Sans";
+    readonly style: {
+        readonly fontFamily: "Open Sans";
+    };
+}, {
+    readonly label: "Oswald";
+    readonly value: "Oswald";
+    readonly style: {
+        readonly fontFamily: "Oswald";
+    };
+}, {
+    readonly label: "Poppins";
+    readonly value: "Poppins";
+    readonly style: {
+        readonly fontFamily: "Poppins";
+    };
+}, {
+    readonly label: "PT Sans";
+    readonly value: "PT Sans";
+    readonly style: {
+        readonly fontFamily: "PT Sans";
+    };
+}, {
+    readonly label: "Pinyon Script";
+    readonly value: "Pinyon Script";
+    readonly style: {
+        readonly fontFamily: "Pinyon Script";
+    };
+}, {
+    readonly label: "Playfair Display";
+    readonly value: "Playfair Display";
+    readonly style: {
+        readonly fontFamily: "Playfair Display";
+    };
+}, {
+    readonly label: "Quicksand";
+    readonly value: "Quicksand";
+    readonly style: {
+        readonly fontFamily: "Quicksand";
+    };
+}, {
+    readonly label: "Raleway";
+    readonly value: "Raleway";
+    readonly style: {
+        readonly fontFamily: "Raleway";
+    };
+}, {
+    readonly label: "Righteous";
+    readonly value: "Righteous";
+    readonly style: {
+        readonly fontFamily: "Righteous";
+    };
+}, {
+    readonly label: "Roboto Slab";
+    readonly value: "Roboto Slab";
+    readonly style: {
+        readonly fontFamily: "Roboto Slab";
+    };
+}, {
+    readonly label: "Roboto";
+    readonly value: "Roboto";
+    readonly style: {
+        readonly fontFamily: "Roboto";
+    };
+}, {
+    readonly label: "Rubik";
+    readonly value: "Rubik";
+    readonly style: {
+        readonly fontFamily: "Rubik";
+    };
+}, {
+    readonly label: "Sarabun";
+    readonly value: "Sarabun";
+    readonly style: {
+        readonly fontFamily: "Sarabun";
+    };
+}, {
+    readonly label: "Source Sans Pro";
+    readonly value: "Source Sans Pro";
+    readonly style: {
+        readonly fontFamily: "Source Sans Pro";
+    };
+}, {
+    readonly label: "Ubuntu";
+    readonly value: "Ubuntu";
+    readonly style: {
+        readonly fontFamily: "Ubuntu";
+    };
+}, {
+    readonly label: "Vollkorn";
+    readonly value: "Vollkorn";
+    readonly style: {
+        readonly fontFamily: "Vollkorn";
+    };
+}];