@antscorp/antsomi-ui 1.3.5-beta.163 → 1.3.5-beta.164

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.
@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  // Libraries
13
- import React, { useEffect, useMemo, useState } from 'react';
13
+ import React, { useEffect, useState } from 'react';
14
14
  import { Form } from 'antd';
15
15
  import dayjs from 'dayjs';
16
16
  // Components
@@ -23,6 +23,7 @@ import { Category, ImageSlider } from './components';
23
23
  import { cloneDeep } from 'lodash';
24
24
  const { Text } = Typography;
25
25
  export const TemplateSaveAs = props => {
26
+ var _a;
26
27
  const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions,
27
28
  // form,
28
29
  form: formProps, value, onChange, onEvent, } = props;
@@ -36,34 +37,20 @@ export const TemplateSaveAs = props => {
36
37
  const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
37
38
  ? { id: undefined, label: defaultNewTemplateName }
38
39
  : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
39
- const initFormValue = useMemo(() => {
40
- var _a;
41
- return ({
42
- saveOption,
43
- templateName: defaultNewTemplateName,
44
- templateNameSelect: (templateName === null || templateName === void 0 ? void 0 : templateName.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id),
45
- description: defaultTemplateDesc || '',
46
- categories: categoriesValue,
47
- defaultThumbnail,
48
- });
49
- }, [
50
- categoriesValue,
51
- defaultNewTemplateName,
52
- defaultTemplateDesc,
53
- defaultThumbnail,
40
+ const initFormValue = {
54
41
  saveOption,
55
- templateName === null || templateName === void 0 ? void 0 : templateName.id,
56
- templateNameList,
57
- ]);
42
+ templateName: defaultNewTemplateName,
43
+ templateNameSelect: (templateName === null || templateName === void 0 ? void 0 : templateName.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id),
44
+ description: defaultTemplateDesc || '',
45
+ categories: categoriesValue,
46
+ defaultThumbnail,
47
+ };
58
48
  const [searchValue, setSearchValue] = useState('');
59
49
  const searchValueDebounce = useDebounce(searchValue, 1000);
60
50
  useEffect(() => {
61
51
  if (searchValueDebounce && onSearch)
62
52
  onSearch(searchValueDebounce);
63
53
  }, [searchValueDebounce, onSearch]);
64
- useEffect(() => {
65
- form.setFieldsValue(initFormValue);
66
- }, [form, initFormValue]);
67
54
  // const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
68
55
  // const [templateNameExist, setTemplateNameExist] = useState(
69
56
  // templateName?.id ? templateName : templateNameList?.[0],
@@ -75,11 +62,23 @@ export const TemplateSaveAs = props => {
75
62
  // }
76
63
  // }, [templateName]);
77
64
  const handleChangeValue = (newValue) => {
65
+ var _a;
78
66
  if (onEvent) {
79
67
  onEvent(newValue);
80
68
  }
81
69
  if (onChange) {
82
- onChange(Object.assign(Object.assign({}, value), newValue), form.getFieldsError().flatMap(item => item.errors));
70
+ const formValue = cloneDeep(form.getFieldsValue(true));
71
+ formValue.templateName =
72
+ formValue.saveOption === saveNewValue
73
+ ? { id: undefined, label: formValue.templateName }
74
+ : {
75
+ id: formValue.templateNameSelect,
76
+ label: ((_a = templateNameList.find(item => item.id === formValue.templateNameSelect)) === null || _a === void 0 ? void 0 : _a.label) ||
77
+ formValue.templateName ||
78
+ '',
79
+ };
80
+ delete formValue.templateNameSelect;
81
+ onChange(Object.assign(Object.assign(Object.assign({}, value), formValue), newValue), form.getFieldsError().flatMap(item => item.errors));
83
82
  }
84
83
  };
85
84
  const handleAddCategory = ({ parentKey, childKey }) => {
@@ -103,16 +102,7 @@ export const TemplateSaveAs = props => {
103
102
  React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
104
103
  React.createElement(Flex, { className: "save-options-container" },
105
104
  React.createElement(Form.Item, { name: "saveOption", noStyle: true },
106
- React.createElement(RadioGroup, { onChange: e => {
107
- var _a;
108
- const { value } = e.target;
109
- const draftTemplateName = cloneDeep(templateName);
110
- if (value === saveExistValue) {
111
- const selectedTemplate = templateNameList.find(template => template.id === (templateName === null || templateName === void 0 ? void 0 : templateName.id));
112
- draftTemplateName.id = (selectedTemplate === null || selectedTemplate === void 0 ? void 0 : selectedTemplate.id) || ((_a = templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]) === null || _a === void 0 ? void 0 : _a.id);
113
- }
114
- handleChangeValue({ saveOption: value, templateName: draftTemplateName });
115
- } },
105
+ React.createElement(RadioGroup, { onChange: e => handleChangeValue({ saveOption: e.target.value }) },
116
106
  React.createElement(Radio, { value: saveNewValue }, saveNewText),
117
107
  React.createElement(Radio, { value: saveExistValue }, saveExistText)))),
118
108
  React.createElement(Flex, null,
@@ -136,7 +126,11 @@ export const TemplateSaveAs = props => {
136
126
  React.createElement(Input, { placeholder: placeholder, maxLength: 255, debounce: 1000, onAfterChange: value => handleChangeValue({
137
127
  templateName: { id: undefined, label: value },
138
128
  }) }))) : (React.createElement(Form.Item, { name: "templateNameSelect" },
139
- React.createElement(Select, { placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
129
+ React.createElement(Select
130
+ // className="field-input"
131
+ , {
132
+ // className="field-input"
133
+ placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
140
134
  if (onNamePopupScroll)
141
135
  onNamePopupScroll(e);
142
136
  if (onScrollToBottom) {
@@ -153,10 +147,24 @@ export const TemplateSaveAs = props => {
153
147
  justifyContent: 'center',
154
148
  alignItems: 'center',
155
149
  } },
156
- React.createElement(Spin, { size: "small" }))) : null)), options: templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.map(item => ({
157
- value: item.id,
158
- label: item.label,
159
- })), onChange: value => {
150
+ React.createElement(Spin, { size: "small" }))) : null)), options:
151
+ // If template exist is not in templateNames list => add to begin of options array
152
+ (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
153
+ ? [
154
+ ...(templateNameList.find(item => item.id === getFieldValue('templateNameSelect'))
155
+ ? []
156
+ : [
157
+ {
158
+ value: getFieldValue('templateNameSelect'),
159
+ label: getFieldValue('templateName'),
160
+ },
161
+ ]),
162
+ ...templateNameList.map(item => ({
163
+ value: item.id,
164
+ label: item.label,
165
+ })),
166
+ ]
167
+ : [], onChange: value => {
160
168
  const newTemplateSelected = templateNameList.find(item => item.id === value);
161
169
  form.setFieldValue('description', newTemplateSelected === null || newTemplateSelected === void 0 ? void 0 : newTemplateSelected.description);
162
170
  handleChangeValue({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antscorp/antsomi-ui",
3
- "version": "1.3.5-beta.163",
3
+ "version": "1.3.5-beta.164",
4
4
  "description": "An enterprise-class UI design language and React UI library.",
5
5
  "sideEffects": [
6
6
  "dist/*",