@antscorp/antsomi-ui 1.3.2-beta.28 → 1.3.2-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.js +1 -1
  2. package/es/components/common/ConfigProvider/ConfigProvider.d.ts +0 -1
  3. package/es/components/common/ConfigProvider/ConfigProvider.js +7 -10
  4. package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js +4 -2
  5. package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js +4 -2
  6. package/es/components/molecules/GradientSetting/index.js +14 -21
  7. package/es/constants/gradientSetting.js +14 -11
  8. package/es/locales/i18n.d.ts +2 -1
  9. package/es/locales/i18n.js +10 -4
  10. package/package.json +4 -4
package/es/components/common/ConfigProvider/ConfigProvider.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-provider';
2
2
  import React, { ReactNode } from 'react';
3
3
  import { TLocale } from '@antscorp/antsomi-ui/es/types';
4
- import '@antscorp/antsomi-ui/es/locales/i18n';
5
4
  interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
6
5
  children?: ReactNode;
7
6
  locale?: TLocale;
package/es/components/common/ConfigProvider/ConfigProvider.js CHANGED
@@ -13,28 +13,25 @@ var __rest = (this && this.__rest) || function (s, e) {
13
13
  import { StyleProvider } from '@ant-design/cssinjs';
14
14
  import { ConfigProvider as AntdConfigProvider } from 'antd';
15
15
  import React, { useEffect } from 'react';
16
- import { useTranslation, I18nextProvider } from 'react-i18next';
17
16
  // Constants
18
17
  import { THEME } from '@antscorp/antsomi-ui/es/constants';
19
18
  // Style
20
19
  import { GlobalStyle } from './GlobalStyle';
21
20
  // Initialize languages
22
- import '@antscorp/antsomi-ui/es/locales/i18n';
21
+ // import '@antscorp/antsomi-ui/es/locales/i18n';
22
+ import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
23
23
  const ConfigProvider = props => {
24
24
  // Props
25
25
  const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);
26
- // I18next
27
- const { i18n } = useTranslation();
28
26
  // Effects
29
27
  useEffect(() => {
30
28
  if (locale) {
31
- i18n.changeLanguage(locale);
29
+ i18next.changeLanguage(locale);
32
30
  }
33
- }, [i18n, locale]);
34
- return (React.createElement(I18nextProvider, { i18n: i18n },
35
- React.createElement(AntdConfigProvider, Object.assign({}, restOfProps),
36
- React.createElement(GlobalStyle, null),
37
- React.createElement(StyleProvider, { hashPriority: "high" }, children))));
31
+ }, [locale]);
32
+ return (React.createElement(AntdConfigProvider, Object.assign({}, restOfProps),
33
+ React.createElement(GlobalStyle, null),
34
+ React.createElement(StyleProvider, { hashPriority: "high" }, children)));
38
35
  };
39
36
  ConfigProvider.defaultProps = {
40
37
  theme: THEME,
package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js CHANGED
@@ -4,7 +4,6 @@ import React, { useEffect, useMemo, useState } from 'react';
4
4
  import { theme } from 'antd';
5
5
  import dayjs from 'dayjs';
6
6
  import clsx from 'clsx';
7
- import { useTranslation } from 'react-i18next';
8
7
  // Hooks
9
8
  import { useDeepCompareEffect } from '../../../../../hooks';
10
9
  // Icons
@@ -22,6 +21,8 @@ import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeade
22
21
  // Constants
23
22
  import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, TIME_PICKER_TYPE, YEAR_PICKER_TYPE, ADVANCED_PICKER_TYPE, } from './constants';
24
23
  import { THEME } from '../../../../../constants';
24
+ // Instance
25
+ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
25
26
  const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/Advanced/DatePickerAdvanced.tsx';
26
27
  const { useToken } = theme;
27
28
  const { Text } = Typography;
@@ -158,7 +159,8 @@ export const AdvancedPicker = props => {
158
159
  }, [calculationTypeKeysShow, showCalculationTypeCondition, option.dateType]);
159
160
  // Hooks
160
161
  const { token } = useToken();
161
- const { t } = useTranslation();
162
+ // const { t } = useTranslation();
163
+ const { t } = i18nInstance;
162
164
  // Variables
163
165
  const contentStyle = {
164
166
  backgroundColor: token.colorBgElevated,
package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js CHANGED
@@ -3,7 +3,6 @@ import dayjs from 'dayjs';
3
3
  import React from 'react';
4
4
  import omit from 'lodash/omit';
5
5
  import isEqual from 'react-fast-compare';
6
- import { useTranslation } from 'react-i18next';
7
6
  // Atoms
8
7
  import { Space } from '../../../../atoms';
9
8
  // Molecules
@@ -13,9 +12,12 @@ import { ADVANCED_RANGE_PICKER_FORMAT } from './constants';
13
12
  // Utils
14
13
  import { handleError } from '@antscorp/antsomi-ui/es/utils';
15
14
  import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
15
+ // Instance
16
+ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
16
17
  const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
17
18
  export const AdvancedRangePicker = props => {
18
- const { t } = useTranslation();
19
+ // const { t } = useTranslation();
20
+ const { t } = i18nInstance;
19
21
  // Props
20
22
  const { timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, onChange, } = props;
21
23
  // Handles
package/es/components/molecules/GradientSetting/index.js CHANGED
@@ -8,7 +8,9 @@ import Icon from '@antscorp/icons';
8
8
  import { mapNumberToOrdinalText } from '@antscorp/antsomi-ui/es/utils';
9
9
  import { cloneDeep } from 'lodash';
10
10
  // Constants
11
- import { GRADIENT_TEXT_LABEL, GRADIENT_TYPE, POSITION } from '@antscorp/antsomi-ui/es/constants';
11
+ import { GRADIENT_TYPE, POSITION } from '@antscorp/antsomi-ui/es/constants';
12
+ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
13
+ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
12
14
  const GRADIENT_MIN = 2;
13
15
  const GRADIENT_MAX = 5;
14
16
  const DEFAULT_GRADIENTS = [
@@ -17,6 +19,8 @@ const DEFAULT_GRADIENTS = [
17
19
  ];
18
20
  export const GradientSetting = ({ onChange, defaultValue }) => {
19
21
  const { gradientType: defaultGradientType, gradients: defaultGradients, linearAngle: defaultLinearAngle, radialPosition: defaultRadialPosition, } = defaultValue || {};
22
+ // const { t } = useTranslation();
23
+ const { t } = i18nInstance;
20
24
  const [gradients, setGradients] = useState(defaultGradients || DEFAULT_GRADIENTS);
21
25
  const [gradientType, setGradientType] = useState(defaultGradientType || 'linear-gradient');
22
26
  const [radialPosition, setRadialPosition] = useState(defaultRadialPosition || 'center center');
@@ -26,9 +30,9 @@ export const GradientSetting = ({ onChange, defaultValue }) => {
26
30
  // eslint-disable-next-line react-hooks/exhaustive-deps
27
31
  }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
28
32
  return (React.createElement(React.Fragment, null,
29
- React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: GRADIENT_TEXT_LABEL.gradientStyle },
33
+ React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.gradientStyle) },
30
34
  React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
31
- gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: GRADIENT_TEXT_LABEL.angle, min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: GRADIENT_TEXT_LABEL.position },
35
+ gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.position) },
32
36
  React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
33
37
  Array.isArray(gradients) && gradients.length
34
38
  ? gradients.map((gradient, index) => {
@@ -36,12 +40,9 @@ export const GradientSetting = ({ onChange, defaultValue }) => {
36
40
  return (React.createElement("div", { className: "ants-flex ants-gap-x-2 ants-mb-[15px]", key: index },
37
41
  React.createElement("div", { className: "ants-grid md:ants-grid-cols-5 ants-grid-cols-1 ants-gap-y-5" },
38
42
  React.createElement("div", { className: "ants-col-span-2" },
39
- React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base",
40
- // label={t(translations.gradientColor, {
41
- // name: translations?.ordinalText?.first,
42
- // // name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
43
- // })}
44
- label: GRADIENT_TEXT_LABEL.gradientColor.replace('{{name}}', GRADIENT_TEXT_LABEL.ordinalText[mapNumberToOrdinalText(index + 1)]), color: gradientColor, positionInput: "right", onChange: color => {
43
+ React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base", label: t(translations.gradientColor, {
44
+ name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
45
+ }), color: gradientColor, positionInput: "right", onChange: color => {
45
46
  setGradients(prev => {
46
47
  const clonePrev = cloneDeep(prev);
47
48
  clonePrev[index].gradientColor = color;
@@ -49,17 +50,9 @@ export const GradientSetting = ({ onChange, defaultValue }) => {
49
50
  });
50
51
  } })),
51
52
  React.createElement("div", { className: "ants-col-span-3" },
52
- React.createElement(SliderWithInputNumber
53
- // label={t(translations.gradientLocation, {
54
- // name: t(translations.ordinalText?.first),
55
- // // name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
56
- // })}
57
- , {
58
- // label={t(translations.gradientLocation, {
59
- // name: t(translations.ordinalText?.first),
60
- // // name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
61
- // })}
62
- label: GRADIENT_TEXT_LABEL.gradientLocation.replace('{{name}}', GRADIENT_TEXT_LABEL.ordinalText[mapNumberToOrdinalText(index + 1)]), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
53
+ React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
54
+ name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
55
+ }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
63
56
  setGradients(prev => {
64
57
  const clonePrev = cloneDeep(prev);
65
58
  clonePrev[index].gradientColorLocation = color;
@@ -80,5 +73,5 @@ export const GradientSetting = ({ onChange, defaultValue }) => {
80
73
  });
81
74
  } },
82
75
  "+ ",
83
- GRADIENT_TEXT_LABEL.addColor))));
76
+ t(translations.addColor)))));
84
77
  };
package/es/constants/gradientSetting.js CHANGED
@@ -1,3 +1,6 @@
1
+ import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
2
+ import { translations } from '../locales/translations';
3
+ const { t } = i18nInstance;
1
4
  export const GRADIENT_TEXT_LABEL = {
2
5
  linear: 'Linear',
3
6
  radial: 'Radial',
@@ -36,48 +39,48 @@ export const GRADIENT_TEXT_LABEL = {
36
39
  export const GRADIENT_TYPE = {
37
40
  LINEAR: {
38
41
  value: 'linear-gradient',
39
- label: GRADIENT_TEXT_LABEL.linear,
42
+ label: t(translations.linear),
40
43
  },
41
44
  RADIAL: {
42
45
  value: 'radial-gradient',
43
- label: GRADIENT_TEXT_LABEL.radial,
46
+ label: t(translations.radial),
44
47
  },
45
48
  };
46
49
  export const POSITION = {
47
50
  LEFT_TOP: {
48
51
  value: 'left top',
49
- label: GRADIENT_TEXT_LABEL.leftTop,
52
+ label: t(translations.leftTop),
50
53
  },
51
54
  LEFT_CENTER: {
52
55
  value: 'left center',
53
- label: GRADIENT_TEXT_LABEL.leftCenter,
56
+ label: t(translations.leftCenter),
54
57
  },
55
58
  LEFT_BOTTOM: {
56
59
  value: 'left bottom',
57
- label: GRADIENT_TEXT_LABEL.leftBottom,
60
+ label: t(translations.leftBottom),
58
61
  },
59
62
  RIGHT_TOP: {
60
63
  value: 'right top',
61
- label: GRADIENT_TEXT_LABEL.rightTop,
64
+ label: t(translations.rightTop),
62
65
  },
63
66
  RIGHT_CENTER: {
64
67
  value: 'right center',
65
- label: GRADIENT_TEXT_LABEL.rightCenter,
68
+ label: t(translations.rightCenter),
66
69
  },
67
70
  RIGHT_BOTTOM: {
68
71
  value: 'right bottom',
69
- label: GRADIENT_TEXT_LABEL.rightBottom,
72
+ label: t(translations.rightBottom),
70
73
  },
71
74
  CENTER_TOP: {
72
75
  value: 'center top',
73
- label: GRADIENT_TEXT_LABEL.centerTop,
76
+ label: t(translations.centerTop),
74
77
  },
75
78
  CENTER_CENTER: {
76
79
  value: 'center center',
77
- label: GRADIENT_TEXT_LABEL.centerCenter,
80
+ label: t(translations.centerCenter),
78
81
  },
79
82
  CENTER_BOTTOM: {
80
83
  value: 'center bottom',
81
- label: GRADIENT_TEXT_LABEL.centerBottom,
84
+ label: t(translations.centerBottom),
82
85
  },
83
86
  };
package/es/locales/i18n.d.ts CHANGED
@@ -136,4 +136,5 @@ export declare const translationsJson: {
136
136
  };
137
137
  };
138
138
  };
139
- export declare const i18n: Promise<import("i18next").TFunction<"translation", undefined>>;
139
+ declare const i18nInstance: import("i18next").i18n;
140
+ export default i18nInstance;
package/es/locales/i18n.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import i18next from 'i18next';
2
- import { initReactI18next } from 'react-i18next';
2
+ // import { initReactI18next } from 'react-i18next';
3
3
  import LanguageDetector from 'i18next-browser-languagedetector';
4
4
  import en from './en/translation.json';
5
5
  import vi from './vi/translation.json';
@@ -14,9 +14,12 @@ export const translationsJson = {
14
14
  };
15
15
  // Create the 'translations' object to provide full intellisense support for the static json files.
16
16
  convertLanguageJsonToObject(en);
17
- export const i18n = i18next
17
+ // i18next
18
+ // export const i18n = i18next
19
+ const i18nInstance = i18next.createInstance();
20
+ i18nInstance
18
21
  // pass the i18n instance to react-i18next.
19
- .use(initReactI18next)
22
+ // .use(initReactI18next)
20
23
  // detect user language
21
24
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
22
25
  .use(LanguageDetector)
@@ -25,8 +28,11 @@ export const i18n = i18next
25
28
  .init({
26
29
  resources: translationsJson,
27
30
  fallbackLng: 'en',
28
- debug: process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',
31
+ // debug: process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',
32
+ // returnObjects: true,
33
+ debug: false,
29
34
  interpolation: {
30
35
  escapeValue: false, // not needed for react as it escapes by default
31
36
  },
32
37
  });
38
+ export default i18nInstance;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.2-beta.28",
3
+ "version": "1.3.2-beta.29",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",
@@ -83,7 +83,9 @@
83
83
  "rehype-highlight": "^6.0.0",
84
84
  "remark-gfm": "^3.0.1",
85
85
  "ts-dedent": "^2.2.0",
86
- "tui-image-editor": "^3.15.3"
86
+ "tui-image-editor": "^3.15.3",
87
+ "i18next": "21.6.16",
88
+ "i18next-browser-languagedetector": "6.1.2"
87
89
  },
88
90
  "devDependencies": {
89
91
  "@ant-design/cssinjs": "^1.6.2",
@@ -145,8 +147,6 @@
145
147
  "eslint-plugin-storybook": "^0.6.11",
146
148
  "file-loader": "^6.2.0",
147
149
  "husky": "^8.0.3",
148
- "i18next": "21.6.16",
149
- "i18next-browser-languagedetector": "6.1.2",
150
150
  "jest": "^29.5.0",
151
151
  "jest-environment-jsdom": "^29.5.0",
152
152
  "lint-staged": "^13.2.0",