pds-dev-kit-web-test 0.3.72 → 0.3.73
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.
- package/dist/src/sub/AdminList/ToolBar/SearchField.d.ts +2 -1
- package/dist/src/sub/AdminList/ToolBar/SearchField.js +4 -4
- package/dist/src/sub/AdminList/ToolBar/ToolBar.d.ts +8 -2
- package/dist/src/sub/AdminList/ToolBar/ToolBar.js +7 -6
- package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +0 -817
- package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +1 -1424
- package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js +1 -3
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +1 -1
- package/package.json +2 -2
- package/release-note.md +9 -3
|
@@ -7,9 +7,10 @@ type Props = {
|
|
|
7
7
|
responsiveMode?: 'none' | 'use';
|
|
8
8
|
size?: 'small' | 'medium' | 'large';
|
|
9
9
|
customWidth?: string;
|
|
10
|
+
arrowBtnMode?: 'use' | 'none';
|
|
10
11
|
onTarget?: () => void;
|
|
11
12
|
onClickArrowIBtn?: () => void;
|
|
12
13
|
onClickSearchIBtn?: (value: string) => void;
|
|
13
14
|
};
|
|
14
|
-
declare function SearchField({ name, hintText, defaultText, responsiveMode, size, customWidth, onTarget, onClickArrowIBtn, onClickSearchIBtn }: Props): JSX.Element;
|
|
15
|
+
declare function SearchField({ name, hintText, defaultText, responsiveMode, size, customWidth, arrowBtnMode, onTarget, onClickArrowIBtn, onClickSearchIBtn }: Props): JSX.Element;
|
|
15
16
|
export default SearchField;
|
|
@@ -47,10 +47,10 @@ var components_2 = require("../../../desktop/components");
|
|
|
47
47
|
var components_3 = require("../../../hybrid/components");
|
|
48
48
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
49
49
|
function SearchField(_a) {
|
|
50
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.responsiveMode, responsiveMode = _b === void 0 ? 'none' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, customWidth = _a.customWidth, onTarget = _a.onTarget, onClickArrowIBtn = _a.onClickArrowIBtn, onClickSearchIBtn = _a.onClickSearchIBtn;
|
|
51
|
-
var
|
|
50
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _b = _a.responsiveMode, responsiveMode = _b === void 0 ? 'none' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, customWidth = _a.customWidth, _d = _a.arrowBtnMode, arrowBtnMode = _d === void 0 ? 'use' : _d, onTarget = _a.onTarget, onClickArrowIBtn = _a.onClickArrowIBtn, onClickSearchIBtn = _a.onClickSearchIBtn;
|
|
51
|
+
var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
|
|
52
52
|
var textFieldBaseRef = (0, react_1.useRef)(null);
|
|
53
|
-
var
|
|
53
|
+
var _f = (0, react_hook_form_1.useFormContext)(), register = _f.register, getValues = _f.getValues, trigger = _f.trigger;
|
|
54
54
|
var validateOnBlur = register(name).onBlur;
|
|
55
55
|
var handleFocus = function () {
|
|
56
56
|
setIsFocused(true);
|
|
@@ -76,7 +76,7 @@ function SearchField(_a) {
|
|
|
76
76
|
onTarget();
|
|
77
77
|
}
|
|
78
78
|
};
|
|
79
|
-
return ((0, jsx_runtime_1.jsx)(S_SearchFieldBox, __assign({ "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: (0, jsx_runtime_1.jsxs)(S_SearchFieldWrapper, __assign({ size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", fieldPaddingLeft: 8, deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick })] })) })));
|
|
79
|
+
return ((0, jsx_runtime_1.jsx)(S_SearchFieldBox, __assign({ "x-pds-name": "SearchField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: (0, jsx_runtime_1.jsxs)(S_SearchFieldWrapper, __assign({ size: size, textLineType: "single", isFocused: isFocused, state: "normal", colorTheme: "none", responsiveMode: responsiveMode, customWidth: customWidth }, { children: [arrowBtnMode === 'use' && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { inputRef: textFieldBaseRef, name: name, size: size, hintText: hintText, defaultText: defaultText, enterSubmitMode: "use", textLineType: "single", textSize: "form2", textWeight: "normal", fieldPaddingLeft: 8, deleteIconMode: "use", deleteIconSize: size === 'large' ? 20 : 16, deleteIconColor: "ui_cpnt_button_icon_disabled", isFocused: isFocused, onFocus: handleFocus, onBlur: handleBlur, onTarget: handleTarget, onChange: register('searchField').onChange }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_a", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_search", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchIBtnClick })] })) })));
|
|
80
80
|
}
|
|
81
81
|
var S_SearchFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", ";\n ", ";\n ", "\n"], ["\n ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
82
82
|
var size = _a.size;
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import type { FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common/types';
|
|
2
|
+
import type { DropdownValueOption, FillIconNameKeys, LineIconNameKeys, PDSTextType, PDSValueOption } from '../../../common/types';
|
|
3
3
|
type Props = {
|
|
4
4
|
searchFieldHintText?: PDSTextType;
|
|
5
5
|
searchFieldDefaultText?: PDSTextType;
|
|
6
6
|
chipTextArray?: PDSValueOption[];
|
|
7
7
|
chipValue?: PDSValueOption;
|
|
8
8
|
searchMode?: 'none' | 'use';
|
|
9
|
+
searchStyleTheme?: 'searchField' | 'dropdown_searchField';
|
|
10
|
+
dropdownArray?: DropdownValueOption[];
|
|
11
|
+
dropdownDefaultText?: DropdownValueOption;
|
|
12
|
+
dropdownHintText?: PDSTextType;
|
|
13
|
+
dropdownValue?: DropdownValueOption | null;
|
|
9
14
|
chipMode?: 'none' | 'use';
|
|
10
15
|
iBtnMode?: 'none' | 'iBtn_amount1' | 'iBtn_amount2' | 'iBtn_amount3';
|
|
11
16
|
iBtn1IconName?: FillIconNameKeys | LineIconNameKeys;
|
|
@@ -14,6 +19,7 @@ type Props = {
|
|
|
14
19
|
iBtn2IconFillType?: 'fill' | 'line';
|
|
15
20
|
iBtn3IconName?: FillIconNameKeys | LineIconNameKeys;
|
|
16
21
|
iBtn3IconFillType?: 'fill' | 'line';
|
|
22
|
+
onChangeDropdown?: (option: DropdownValueOption) => void;
|
|
17
23
|
onClickChip?: (option: PDSValueOption) => void;
|
|
18
24
|
onClickSearchFieldResetIBtn?: () => void;
|
|
19
25
|
onClickSearchIBtn?: (value: string) => void;
|
|
@@ -22,5 +28,5 @@ type Props = {
|
|
|
22
28
|
onClickIBtn2?: () => void;
|
|
23
29
|
onClickIBtn3?: () => void;
|
|
24
30
|
};
|
|
25
|
-
declare function ToolBar({ searchFieldHintText, searchFieldDefaultText, chipTextArray, chipValue, searchMode, chipMode, iBtnMode, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, iBtn3IconName, iBtn3IconFillType, onClickChip, onClickSearchFieldResetIBtn, onClickSearchIBtn, onEnterKeyDown, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: Props): JSX.Element;
|
|
31
|
+
declare function ToolBar({ searchFieldHintText, searchFieldDefaultText, chipTextArray, chipValue, searchMode, searchStyleTheme, dropdownArray, dropdownDefaultText, dropdownHintText, dropdownValue, onChangeDropdown, chipMode, iBtnMode, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, iBtn3IconName, iBtn3IconFillType, onClickChip, onClickSearchFieldResetIBtn, onClickSearchIBtn, onEnterKeyDown, onClickIBtn1, onClickIBtn2, onClickIBtn3 }: Props): JSX.Element;
|
|
26
32
|
export default ToolBar;
|
|
@@ -28,8 +28,8 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
28
28
|
var ChipList_1 = __importDefault(require("./ChipList"));
|
|
29
29
|
var SearchField_1 = __importDefault(require("./SearchField"));
|
|
30
30
|
function ToolBar(_a) {
|
|
31
|
-
var searchFieldHintText = _a.searchFieldHintText, searchFieldDefaultText = _a.searchFieldDefaultText, chipTextArray = _a.chipTextArray, chipValue = _a.chipValue, _b = _a.searchMode, searchMode = _b === void 0 ? 'none' : _b, _c = _a.
|
|
32
|
-
var
|
|
31
|
+
var searchFieldHintText = _a.searchFieldHintText, searchFieldDefaultText = _a.searchFieldDefaultText, chipTextArray = _a.chipTextArray, chipValue = _a.chipValue, _b = _a.searchMode, searchMode = _b === void 0 ? 'none' : _b, _c = _a.searchStyleTheme, searchStyleTheme = _c === void 0 ? 'searchField' : _c, dropdownArray = _a.dropdownArray, dropdownDefaultText = _a.dropdownDefaultText, dropdownHintText = _a.dropdownHintText, dropdownValue = _a.dropdownValue, onChangeDropdown = _a.onChangeDropdown, _d = _a.chipMode, chipMode = _d === void 0 ? 'none' : _d, _e = _a.iBtnMode, iBtnMode = _e === void 0 ? 'none' : _e, iBtn1IconName = _a.iBtn1IconName, _f = _a.iBtn1IconFillType, iBtn1IconFillType = _f === void 0 ? 'line' : _f, iBtn2IconName = _a.iBtn2IconName, _g = _a.iBtn2IconFillType, iBtn2IconFillType = _g === void 0 ? 'line' : _g, iBtn3IconName = _a.iBtn3IconName, _h = _a.iBtn3IconFillType, iBtn3IconFillType = _h === void 0 ? 'line' : _h, onClickChip = _a.onClickChip, onClickSearchFieldResetIBtn = _a.onClickSearchFieldResetIBtn, onClickSearchIBtn = _a.onClickSearchIBtn, onEnterKeyDown = _a.onEnterKeyDown, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onClickIBtn3 = _a.onClickIBtn3;
|
|
32
|
+
var _j = (0, react_1.useState)(!!searchFieldDefaultText), isShowSearchField = _j[0], setIsShowSearchField = _j[1];
|
|
33
33
|
var methods = (0, react_hook_form_1.useForm)();
|
|
34
34
|
var reset = methods.reset, handleSubmit = methods.handleSubmit;
|
|
35
35
|
var onSubmit = function (_a) {
|
|
@@ -73,14 +73,15 @@ function ToolBar(_a) {
|
|
|
73
73
|
onClickIBtn3();
|
|
74
74
|
}
|
|
75
75
|
};
|
|
76
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(S_ToolBarBox, { children: [(0, jsx_runtime_1.jsx)(S_FilterBox, { children: isShowSearchField ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchMode === 'use' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsxs)(components_1.Form, __assign({ onSubmit: handleSubmit(onSubmit) }, { children: [searchStyleTheme === 'searchField' && ((0, jsx_runtime_1.jsxs)(S_Flex, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_e", spacingType: "width" }), (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickArrowIBtn: handleArrowIBtnClick, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" })] })), searchStyleTheme === 'dropdown_searchField' && ((0, jsx_runtime_1.jsxs)(S_Flex, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_c", spacingType: "width" }), (0, jsx_runtime_1.jsx)(components_2.IconButton, { baseSize: "medium", iconSize: 20, iconName: "ic_arrow_left", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleArrowIBtnClick }), (0, jsx_runtime_1.jsx)(components_2.Dropdown, { valueArray: dropdownArray || [], defaultValue: dropdownDefaultText, hintText: dropdownHintText, value: dropdownValue, onChange: onChangeDropdown, size: "medium", customWidth: "144px" }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_b", spacingType: "width" }), (0, jsx_runtime_1.jsx)(SearchField_1.default, { name: "searchField", arrowBtnMode: "none", hintText: searchFieldHintText, defaultText: searchFieldDefaultText, onClickSearchIBtn: handleSearchIBtnClick, customWidth: "424px" })] }))] })) })) })) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchMode === 'use' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" }), (0, jsx_runtime_1.jsx)(S_SearchIconWrapper, { children: (0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "small", iconSize: 24, shapeType: "rectangle", iconName: "ic_search", iconFillType: "fill", iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleSearchFieldShowIBtnClick }) })] })), chipMode === 'use' && chipTextArray && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_3.Spacing, { size: searchMode === 'use' ? 'spacing_d' : 'spacing_e', spacingType: "width" }), (0, jsx_runtime_1.jsx)(ChipList_1.default, { textArray: chipTextArray, value: chipValue, onClickChip: handleChipClick })] }))] })) }), (0, jsx_runtime_1.jsx)(S_IconButtonBox, { children: iBtnMode !== 'none' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iBtnMode === 'iBtn_amount3' && iBtn3IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn3IconName, iconFillType: iBtn3IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn3Click })), (iBtnMode === 'iBtn_amount2' || iBtnMode === 'iBtn_amount3') && iBtn2IconName && ((0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn2IconName, iconFillType: iBtn2IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn2Click })), iBtn1IconName && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_2.IconButton, { fillType: "fill", baseSize: "medium", iconSize: 24, shapeType: "rectangle", iconName: iBtn1IconName, iconFillType: iBtn1IconFillType, iconColorKey: "ui_cpnt_list_icon_01", baseColorKey: "ui_cpnt_button_fill_base_transparent", onClick: handleIBtn1Click }), (0, jsx_runtime_1.jsx)(components_3.Spacing, { size: "spacing_d", spacingType: "width" })] }))] })) })] }) }));
|
|
77
77
|
}
|
|
78
78
|
var S_ToolBarBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n min-height: 40px;\n"], ["\n align-items: flex-start;\n display: flex;\n justify-content: space-between;\n min-height: 40px;\n"])));
|
|
79
79
|
var S_FilterBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
80
|
-
var
|
|
81
|
-
var
|
|
80
|
+
var S_Flex = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
81
|
+
var S_SearchIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n height: 40px;\n"], ["\n align-items: center;\n display: flex;\n height: 40px;\n"])));
|
|
82
|
+
var S_IconButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n height: 40px;\n\n & > :not(:first-child) {\n margin-left: ", ";\n }\n"], ["\n display: flex;\n height: 40px;\n\n & > :not(:first-child) {\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
82
83
|
var theme = _a.theme;
|
|
83
84
|
return theme.spacing.spacingB;
|
|
84
85
|
});
|
|
85
86
|
exports.default = ToolBar;
|
|
86
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
87
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|