@pdg/react-form 1.0.148 → 1.0.150
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.
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HashSearchProps as Props } from './HashSearch.types';
|
|
3
|
+
import { SearchCommands } from '../Search';
|
|
4
|
+
export declare const HashSearch: React.ForwardRefExoticComponent<Props & React.RefAttributes<SearchCommands>>;
|
|
5
|
+
export default HashSearch;
|
package/dist/Search/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -10549,4 +10549,270 @@ var SearchButton$1 = React.memo(SearchButton);var SearchMenuButton = function (_
|
|
|
10549
10549
|
return (React.createElement(React.Fragment, null,
|
|
10550
10550
|
React.createElement(FormButton$1, __assign({ className: classNames(className, 'SearchMenuButton'), size: 'medium', sx: __assign({ minWidth: 0, px: "".concat(!children ? 9 : 13, "px !important") }, initSx), fullWidth: false }, props, { id: buttonId, "aria-controls": open ? menuId : undefined, "aria-haspopup": 'true', "aria-expanded": open ? 'true' : undefined, endIcon: endIcon, endIconProps: { style: { marginRight: -5 } }, onClick: handleClick }), children),
|
|
10551
10551
|
React.createElement(Menu, { id: menuId, "aria-labelledby": buttonId, anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, menuList)));
|
|
10552
|
-
};
|
|
10552
|
+
};var HashSearch = React.forwardRef(function (_a, ref) {
|
|
10553
|
+
/********************************************************************************************************************
|
|
10554
|
+
* Ref
|
|
10555
|
+
* ******************************************************************************************************************/
|
|
10556
|
+
var onSubmit = _a.onSubmit, onRequestHashChange = _a.onRequestHashChange, props = __rest(_a, ["onSubmit", "onRequestHashChange"]);
|
|
10557
|
+
var searchRef = useRef(null);
|
|
10558
|
+
var initPathRef = useRef(window.location.pathname);
|
|
10559
|
+
/********************************************************************************************************************
|
|
10560
|
+
* State
|
|
10561
|
+
* ******************************************************************************************************************/
|
|
10562
|
+
var _b = useState(true), isFirstSearchSubmit = _b[0], setIsFirstSearchSubmit = _b[1];
|
|
10563
|
+
/********************************************************************************************************************
|
|
10564
|
+
* Function
|
|
10565
|
+
* ******************************************************************************************************************/
|
|
10566
|
+
var deHash = useCallback(function () {
|
|
10567
|
+
var values = {};
|
|
10568
|
+
var hash = window.location.hash.substring(1);
|
|
10569
|
+
hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
|
|
10570
|
+
values[decodeURIComponent(key)] = decodeURIComponent(value);
|
|
10571
|
+
return substring;
|
|
10572
|
+
});
|
|
10573
|
+
return values;
|
|
10574
|
+
}, []);
|
|
10575
|
+
var hashToSearchValue = useCallback(function () {
|
|
10576
|
+
var commands = searchRef.current;
|
|
10577
|
+
if (commands) {
|
|
10578
|
+
commands.resetAll();
|
|
10579
|
+
var hashValues_1 = deHash();
|
|
10580
|
+
Object.keys(hashValues_1).forEach(function (name) {
|
|
10581
|
+
var _a, _b;
|
|
10582
|
+
var value = hashValues_1[name];
|
|
10583
|
+
var itemCommands = commands.getItem(name);
|
|
10584
|
+
if (itemCommands) {
|
|
10585
|
+
switch (itemCommands.getType()) {
|
|
10586
|
+
case 'FormCheckbox':
|
|
10587
|
+
if (notEmpty(value)) {
|
|
10588
|
+
var checkCommands = itemCommands;
|
|
10589
|
+
if (value.toString() === ((_a = itemCommands.getValue()) === null || _a === void 0 ? void 0 : _a.toString())) {
|
|
10590
|
+
checkCommands.setChecked(true);
|
|
10591
|
+
}
|
|
10592
|
+
else if (value.toString() === ((_b = checkCommands.getUncheckedValue()) === null || _b === void 0 ? void 0 : _b.toString())) {
|
|
10593
|
+
checkCommands.setChecked(false);
|
|
10594
|
+
}
|
|
10595
|
+
}
|
|
10596
|
+
break;
|
|
10597
|
+
case 'FormDatePicker':
|
|
10598
|
+
case 'FormDateTimePicker':
|
|
10599
|
+
case 'FormTimePicker':
|
|
10600
|
+
{
|
|
10601
|
+
if (notEmpty(value)) {
|
|
10602
|
+
var dateCommands = itemCommands;
|
|
10603
|
+
var format = dateCommands.getFormValueFormat();
|
|
10604
|
+
var itemValue = dayjs(value, format);
|
|
10605
|
+
itemCommands.setValue(itemValue.isValid() ? itemValue : null);
|
|
10606
|
+
}
|
|
10607
|
+
else {
|
|
10608
|
+
itemCommands.setValue(null);
|
|
10609
|
+
}
|
|
10610
|
+
}
|
|
10611
|
+
break;
|
|
10612
|
+
case 'FormDateRangePicker':
|
|
10613
|
+
{
|
|
10614
|
+
var dateRangePickerCommands = itemCommands;
|
|
10615
|
+
var fromName = dateRangePickerCommands.getFormValueFromName();
|
|
10616
|
+
var toName = dateRangePickerCommands.getFormValueToName();
|
|
10617
|
+
var format = dateRangePickerCommands.getFormValueFormat();
|
|
10618
|
+
if (name === fromName) {
|
|
10619
|
+
if (notEmpty(value)) {
|
|
10620
|
+
var startValue = dayjs(value, format);
|
|
10621
|
+
dateRangePickerCommands.setFromValue(startValue.isValid() ? startValue : null);
|
|
10622
|
+
}
|
|
10623
|
+
else {
|
|
10624
|
+
dateRangePickerCommands.setFromValue(null);
|
|
10625
|
+
}
|
|
10626
|
+
}
|
|
10627
|
+
else if (name === toName) {
|
|
10628
|
+
if (notEmpty(value)) {
|
|
10629
|
+
var endValue = dayjs(value, format);
|
|
10630
|
+
dateRangePickerCommands.setToValue(endValue.isValid() ? endValue : null);
|
|
10631
|
+
}
|
|
10632
|
+
else {
|
|
10633
|
+
dateRangePickerCommands.setToValue(null);
|
|
10634
|
+
}
|
|
10635
|
+
}
|
|
10636
|
+
}
|
|
10637
|
+
break;
|
|
10638
|
+
case 'FormYearRangePicker':
|
|
10639
|
+
{
|
|
10640
|
+
var dateRangePickerCommands = itemCommands;
|
|
10641
|
+
var fromName = dateRangePickerCommands.getFormValueFromName();
|
|
10642
|
+
var toName = dateRangePickerCommands.getFormValueToName();
|
|
10643
|
+
if (name === fromName) {
|
|
10644
|
+
dateRangePickerCommands.setFromValue(notEmpty(value) ? Number(value) : null);
|
|
10645
|
+
}
|
|
10646
|
+
else if (name === toName) {
|
|
10647
|
+
dateRangePickerCommands.setToValue(notEmpty(value) ? Number(value) : null);
|
|
10648
|
+
}
|
|
10649
|
+
}
|
|
10650
|
+
break;
|
|
10651
|
+
case 'FormMonthPicker':
|
|
10652
|
+
{
|
|
10653
|
+
var monthCommands = itemCommands;
|
|
10654
|
+
var yearName = monthCommands.getFormValueYearName();
|
|
10655
|
+
var monthName = monthCommands.getFormValueMonthName();
|
|
10656
|
+
if (name === yearName) {
|
|
10657
|
+
monthCommands.setYear(notEmpty(value) ? Number(value) : null);
|
|
10658
|
+
}
|
|
10659
|
+
else if (name === monthName) {
|
|
10660
|
+
monthCommands.setMonth(notEmpty(value) ? Number(value) : null);
|
|
10661
|
+
}
|
|
10662
|
+
}
|
|
10663
|
+
break;
|
|
10664
|
+
case 'FormMonthRangePicker':
|
|
10665
|
+
{
|
|
10666
|
+
var monthRangeCommands = itemCommands;
|
|
10667
|
+
var fromYearName = monthRangeCommands.getFormValueFromYearName();
|
|
10668
|
+
var fromMonthName = monthRangeCommands.getFormValueFromMonthName();
|
|
10669
|
+
var toYearName = monthRangeCommands.getFormValueToYearName();
|
|
10670
|
+
var toMonthName = monthRangeCommands.getFormValueToMonthName();
|
|
10671
|
+
if (name === fromYearName) {
|
|
10672
|
+
monthRangeCommands.setFromYear(notEmpty(value) ? Number(value) : null);
|
|
10673
|
+
}
|
|
10674
|
+
else if (name === fromMonthName) {
|
|
10675
|
+
monthRangeCommands.setFromMonth(notEmpty(value) ? Number(value) : null);
|
|
10676
|
+
}
|
|
10677
|
+
else if (name === toYearName) {
|
|
10678
|
+
monthRangeCommands.setToYear(notEmpty(value) ? Number(value) : null);
|
|
10679
|
+
}
|
|
10680
|
+
else if (name === toMonthName) {
|
|
10681
|
+
monthRangeCommands.setToMonth(notEmpty(value) ? Number(value) : null);
|
|
10682
|
+
}
|
|
10683
|
+
}
|
|
10684
|
+
break;
|
|
10685
|
+
default:
|
|
10686
|
+
commands.setValue(name, value);
|
|
10687
|
+
break;
|
|
10688
|
+
}
|
|
10689
|
+
}
|
|
10690
|
+
});
|
|
10691
|
+
return commands.getAllFormValue();
|
|
10692
|
+
}
|
|
10693
|
+
}, [deHash]);
|
|
10694
|
+
/********************************************************************************************************************
|
|
10695
|
+
* hash
|
|
10696
|
+
* ******************************************************************************************************************/
|
|
10697
|
+
useEffect(function () {
|
|
10698
|
+
if (window.location.pathname === initPathRef.current) {
|
|
10699
|
+
var data = hashToSearchValue();
|
|
10700
|
+
if (data)
|
|
10701
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data);
|
|
10702
|
+
}
|
|
10703
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
10704
|
+
}, [window.location.hash]);
|
|
10705
|
+
var hashChange = useCallback(function (params) {
|
|
10706
|
+
if (onRequestHashChange) {
|
|
10707
|
+
var hashes_1 = [];
|
|
10708
|
+
Object.keys(params).forEach(function (name) {
|
|
10709
|
+
var value = params[name];
|
|
10710
|
+
if (searchRef.current) {
|
|
10711
|
+
var itemCommands = searchRef.current.getItem(name);
|
|
10712
|
+
if (itemCommands) {
|
|
10713
|
+
var resetValue = null;
|
|
10714
|
+
switch (itemCommands.getType()) {
|
|
10715
|
+
case 'FormDateRangePicker':
|
|
10716
|
+
case 'FormYearRangePicker':
|
|
10717
|
+
{
|
|
10718
|
+
var commands = itemCommands;
|
|
10719
|
+
var itemName = itemCommands.getName();
|
|
10720
|
+
var fromName = commands.getFormValueFromName();
|
|
10721
|
+
var fromSuffix = commands.getFormValueFromNameSuffix();
|
|
10722
|
+
var toName = commands.getFormValueToName();
|
|
10723
|
+
var toSuffix = commands.getFormValueToNameSuffix();
|
|
10724
|
+
if (name === fromName) {
|
|
10725
|
+
resetValue = searchRef.current.getFormReset(itemName, fromSuffix);
|
|
10726
|
+
}
|
|
10727
|
+
else if (name === toName) {
|
|
10728
|
+
resetValue = searchRef.current.getFormReset(itemName, toSuffix);
|
|
10729
|
+
}
|
|
10730
|
+
}
|
|
10731
|
+
break;
|
|
10732
|
+
case 'FormMonthPicker':
|
|
10733
|
+
{
|
|
10734
|
+
var commands = itemCommands;
|
|
10735
|
+
var itemName = commands.getName();
|
|
10736
|
+
var yearName = commands.getFormValueYearName();
|
|
10737
|
+
var yearSuffix = commands.getFormValueYearNameSuffix();
|
|
10738
|
+
var monthName = commands.getFormValueMonthName();
|
|
10739
|
+
var monthSuffix = commands.getFormValueMonthNameSuffix();
|
|
10740
|
+
if (name === yearName) {
|
|
10741
|
+
resetValue = searchRef.current.getFormReset(itemName, yearSuffix);
|
|
10742
|
+
}
|
|
10743
|
+
else if (name === monthName) {
|
|
10744
|
+
resetValue = searchRef.current.getFormReset(itemName, monthSuffix);
|
|
10745
|
+
}
|
|
10746
|
+
}
|
|
10747
|
+
break;
|
|
10748
|
+
case 'FormMonthRangePicker':
|
|
10749
|
+
{
|
|
10750
|
+
var commands = itemCommands;
|
|
10751
|
+
var itemName = commands.getName();
|
|
10752
|
+
var fromYearName = commands.getFormValueFromYearName();
|
|
10753
|
+
var fromYearSuffix = commands.getFormValueFromYearNameSuffix();
|
|
10754
|
+
var fromMonthName = commands.getFormValueFromMonthName();
|
|
10755
|
+
var fromMonthSuffix = commands.getFormValueFromMonthNameSuffix();
|
|
10756
|
+
var toYearName = commands.getFormValueToYearName();
|
|
10757
|
+
var toYearSuffix = commands.getFormValueToYearNameSuffix();
|
|
10758
|
+
var toMonthName = commands.getFormValueToMonthName();
|
|
10759
|
+
var toMonthSuffix = commands.getFormValueToMonthNameSuffix();
|
|
10760
|
+
if (name === fromYearName) {
|
|
10761
|
+
resetValue = searchRef.current.getFormReset(itemName, fromYearSuffix);
|
|
10762
|
+
}
|
|
10763
|
+
else if (name === fromMonthName) {
|
|
10764
|
+
resetValue = searchRef.current.getFormReset(itemName, fromMonthSuffix);
|
|
10765
|
+
}
|
|
10766
|
+
else if (name === toYearName) {
|
|
10767
|
+
resetValue = searchRef.current.getFormReset(itemName, toYearSuffix);
|
|
10768
|
+
}
|
|
10769
|
+
else if (name === toMonthName) {
|
|
10770
|
+
resetValue = searchRef.current.getFormReset(itemName, toMonthSuffix);
|
|
10771
|
+
}
|
|
10772
|
+
}
|
|
10773
|
+
break;
|
|
10774
|
+
default:
|
|
10775
|
+
resetValue = searchRef.current.getFormReset(name);
|
|
10776
|
+
break;
|
|
10777
|
+
}
|
|
10778
|
+
if (resetValue != null && !equal(resetValue, value) && typeof value !== 'object') {
|
|
10779
|
+
hashes_1.push("".concat(name, "=").concat(encodeURIComponent(value)));
|
|
10780
|
+
}
|
|
10781
|
+
}
|
|
10782
|
+
}
|
|
10783
|
+
});
|
|
10784
|
+
var finalHash = hashes_1.join('&');
|
|
10785
|
+
if (window.location.hash.substring(1) === finalHash) {
|
|
10786
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(params);
|
|
10787
|
+
}
|
|
10788
|
+
else {
|
|
10789
|
+
onRequestHashChange(hashes_1.join('&'));
|
|
10790
|
+
}
|
|
10791
|
+
}
|
|
10792
|
+
}, [onRequestHashChange, onSubmit]);
|
|
10793
|
+
/********************************************************************************************************************
|
|
10794
|
+
* Event Handler
|
|
10795
|
+
* ******************************************************************************************************************/
|
|
10796
|
+
var handleSubmit = useCallback(function (data) {
|
|
10797
|
+
if (isFirstSearchSubmit) {
|
|
10798
|
+
setIsFirstSearchSubmit(false);
|
|
10799
|
+
}
|
|
10800
|
+
else {
|
|
10801
|
+
hashChange(data);
|
|
10802
|
+
}
|
|
10803
|
+
}, [hashChange, isFirstSearchSubmit]);
|
|
10804
|
+
/********************************************************************************************************************
|
|
10805
|
+
* Render
|
|
10806
|
+
* ******************************************************************************************************************/
|
|
10807
|
+
return (React.createElement(Search, __assign({ ref: function (r) {
|
|
10808
|
+
searchRef.current = r;
|
|
10809
|
+
if (ref) {
|
|
10810
|
+
if (typeof ref === 'function') {
|
|
10811
|
+
ref(r);
|
|
10812
|
+
}
|
|
10813
|
+
else {
|
|
10814
|
+
ref.current = r;
|
|
10815
|
+
}
|
|
10816
|
+
}
|
|
10817
|
+
} }, props, { onSubmit: handleSubmit })));
|
|
10818
|
+
});export{Form,FormAutocomplete,FormBlock,FormBody,FormButton$1 as FormButton,FormCheckbox,FormCol,FormCompanyNo,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDateRangePicker,FormDateTimePicker,FormDivider,FormEmail,FormFile,FormFooter,FormHidden,FormImageFile,FormLabel$1 as FormLabel,FormMobile,FormMonthPicker,FormMonthRangePicker,FormNumber,FormPassword,FormPersonalNo,FormRadioGroup,FormRating,FormRow,FormSearch,FormSelect,FormSwitch,FormTag,FormTel,FormText,FormTextEditor,FormTextField,FormTextarea,FormTimePicker,FormToggleButtonGroup,FormUrl,FormYearPicker,FormYearRangePicker,HashSearch,Search,SearchButton$1 as SearchButton,SearchGroup,SearchGroupRow,SearchMenuButton,useFormState};
|
package/dist/index.js
CHANGED
|
@@ -10549,4 +10549,270 @@ var SearchButton$1 = React.memo(SearchButton);var SearchMenuButton = function (_
|
|
|
10549
10549
|
return (React.createElement(React.Fragment, null,
|
|
10550
10550
|
React.createElement(FormButton$1, __assign({ className: classNames(className, 'SearchMenuButton'), size: 'medium', sx: __assign({ minWidth: 0, px: "".concat(!children ? 9 : 13, "px !important") }, initSx), fullWidth: false }, props, { id: buttonId, "aria-controls": open ? menuId : undefined, "aria-haspopup": 'true', "aria-expanded": open ? 'true' : undefined, endIcon: endIcon, endIconProps: { style: { marginRight: -5 } }, onClick: handleClick }), children),
|
|
10551
10551
|
React.createElement(material.Menu, { id: menuId, "aria-labelledby": buttonId, anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, menuList)));
|
|
10552
|
-
};
|
|
10552
|
+
};var HashSearch = React.forwardRef(function (_a, ref) {
|
|
10553
|
+
/********************************************************************************************************************
|
|
10554
|
+
* Ref
|
|
10555
|
+
* ******************************************************************************************************************/
|
|
10556
|
+
var onSubmit = _a.onSubmit, onRequestHashChange = _a.onRequestHashChange, props = __rest(_a, ["onSubmit", "onRequestHashChange"]);
|
|
10557
|
+
var searchRef = React.useRef(null);
|
|
10558
|
+
var initPathRef = React.useRef(window.location.pathname);
|
|
10559
|
+
/********************************************************************************************************************
|
|
10560
|
+
* State
|
|
10561
|
+
* ******************************************************************************************************************/
|
|
10562
|
+
var _b = React.useState(true), isFirstSearchSubmit = _b[0], setIsFirstSearchSubmit = _b[1];
|
|
10563
|
+
/********************************************************************************************************************
|
|
10564
|
+
* Function
|
|
10565
|
+
* ******************************************************************************************************************/
|
|
10566
|
+
var deHash = React.useCallback(function () {
|
|
10567
|
+
var values = {};
|
|
10568
|
+
var hash = window.location.hash.substring(1);
|
|
10569
|
+
hash.replace(/([^=&]+)=([^&]*)/g, function (substring, key, value) {
|
|
10570
|
+
values[decodeURIComponent(key)] = decodeURIComponent(value);
|
|
10571
|
+
return substring;
|
|
10572
|
+
});
|
|
10573
|
+
return values;
|
|
10574
|
+
}, []);
|
|
10575
|
+
var hashToSearchValue = React.useCallback(function () {
|
|
10576
|
+
var commands = searchRef.current;
|
|
10577
|
+
if (commands) {
|
|
10578
|
+
commands.resetAll();
|
|
10579
|
+
var hashValues_1 = deHash();
|
|
10580
|
+
Object.keys(hashValues_1).forEach(function (name) {
|
|
10581
|
+
var _a, _b;
|
|
10582
|
+
var value = hashValues_1[name];
|
|
10583
|
+
var itemCommands = commands.getItem(name);
|
|
10584
|
+
if (itemCommands) {
|
|
10585
|
+
switch (itemCommands.getType()) {
|
|
10586
|
+
case 'FormCheckbox':
|
|
10587
|
+
if (util.notEmpty(value)) {
|
|
10588
|
+
var checkCommands = itemCommands;
|
|
10589
|
+
if (value.toString() === ((_a = itemCommands.getValue()) === null || _a === void 0 ? void 0 : _a.toString())) {
|
|
10590
|
+
checkCommands.setChecked(true);
|
|
10591
|
+
}
|
|
10592
|
+
else if (value.toString() === ((_b = checkCommands.getUncheckedValue()) === null || _b === void 0 ? void 0 : _b.toString())) {
|
|
10593
|
+
checkCommands.setChecked(false);
|
|
10594
|
+
}
|
|
10595
|
+
}
|
|
10596
|
+
break;
|
|
10597
|
+
case 'FormDatePicker':
|
|
10598
|
+
case 'FormDateTimePicker':
|
|
10599
|
+
case 'FormTimePicker':
|
|
10600
|
+
{
|
|
10601
|
+
if (util.notEmpty(value)) {
|
|
10602
|
+
var dateCommands = itemCommands;
|
|
10603
|
+
var format = dateCommands.getFormValueFormat();
|
|
10604
|
+
var itemValue = dayjs(value, format);
|
|
10605
|
+
itemCommands.setValue(itemValue.isValid() ? itemValue : null);
|
|
10606
|
+
}
|
|
10607
|
+
else {
|
|
10608
|
+
itemCommands.setValue(null);
|
|
10609
|
+
}
|
|
10610
|
+
}
|
|
10611
|
+
break;
|
|
10612
|
+
case 'FormDateRangePicker':
|
|
10613
|
+
{
|
|
10614
|
+
var dateRangePickerCommands = itemCommands;
|
|
10615
|
+
var fromName = dateRangePickerCommands.getFormValueFromName();
|
|
10616
|
+
var toName = dateRangePickerCommands.getFormValueToName();
|
|
10617
|
+
var format = dateRangePickerCommands.getFormValueFormat();
|
|
10618
|
+
if (name === fromName) {
|
|
10619
|
+
if (util.notEmpty(value)) {
|
|
10620
|
+
var startValue = dayjs(value, format);
|
|
10621
|
+
dateRangePickerCommands.setFromValue(startValue.isValid() ? startValue : null);
|
|
10622
|
+
}
|
|
10623
|
+
else {
|
|
10624
|
+
dateRangePickerCommands.setFromValue(null);
|
|
10625
|
+
}
|
|
10626
|
+
}
|
|
10627
|
+
else if (name === toName) {
|
|
10628
|
+
if (util.notEmpty(value)) {
|
|
10629
|
+
var endValue = dayjs(value, format);
|
|
10630
|
+
dateRangePickerCommands.setToValue(endValue.isValid() ? endValue : null);
|
|
10631
|
+
}
|
|
10632
|
+
else {
|
|
10633
|
+
dateRangePickerCommands.setToValue(null);
|
|
10634
|
+
}
|
|
10635
|
+
}
|
|
10636
|
+
}
|
|
10637
|
+
break;
|
|
10638
|
+
case 'FormYearRangePicker':
|
|
10639
|
+
{
|
|
10640
|
+
var dateRangePickerCommands = itemCommands;
|
|
10641
|
+
var fromName = dateRangePickerCommands.getFormValueFromName();
|
|
10642
|
+
var toName = dateRangePickerCommands.getFormValueToName();
|
|
10643
|
+
if (name === fromName) {
|
|
10644
|
+
dateRangePickerCommands.setFromValue(util.notEmpty(value) ? Number(value) : null);
|
|
10645
|
+
}
|
|
10646
|
+
else if (name === toName) {
|
|
10647
|
+
dateRangePickerCommands.setToValue(util.notEmpty(value) ? Number(value) : null);
|
|
10648
|
+
}
|
|
10649
|
+
}
|
|
10650
|
+
break;
|
|
10651
|
+
case 'FormMonthPicker':
|
|
10652
|
+
{
|
|
10653
|
+
var monthCommands = itemCommands;
|
|
10654
|
+
var yearName = monthCommands.getFormValueYearName();
|
|
10655
|
+
var monthName = monthCommands.getFormValueMonthName();
|
|
10656
|
+
if (name === yearName) {
|
|
10657
|
+
monthCommands.setYear(util.notEmpty(value) ? Number(value) : null);
|
|
10658
|
+
}
|
|
10659
|
+
else if (name === monthName) {
|
|
10660
|
+
monthCommands.setMonth(util.notEmpty(value) ? Number(value) : null);
|
|
10661
|
+
}
|
|
10662
|
+
}
|
|
10663
|
+
break;
|
|
10664
|
+
case 'FormMonthRangePicker':
|
|
10665
|
+
{
|
|
10666
|
+
var monthRangeCommands = itemCommands;
|
|
10667
|
+
var fromYearName = monthRangeCommands.getFormValueFromYearName();
|
|
10668
|
+
var fromMonthName = monthRangeCommands.getFormValueFromMonthName();
|
|
10669
|
+
var toYearName = monthRangeCommands.getFormValueToYearName();
|
|
10670
|
+
var toMonthName = monthRangeCommands.getFormValueToMonthName();
|
|
10671
|
+
if (name === fromYearName) {
|
|
10672
|
+
monthRangeCommands.setFromYear(util.notEmpty(value) ? Number(value) : null);
|
|
10673
|
+
}
|
|
10674
|
+
else if (name === fromMonthName) {
|
|
10675
|
+
monthRangeCommands.setFromMonth(util.notEmpty(value) ? Number(value) : null);
|
|
10676
|
+
}
|
|
10677
|
+
else if (name === toYearName) {
|
|
10678
|
+
monthRangeCommands.setToYear(util.notEmpty(value) ? Number(value) : null);
|
|
10679
|
+
}
|
|
10680
|
+
else if (name === toMonthName) {
|
|
10681
|
+
monthRangeCommands.setToMonth(util.notEmpty(value) ? Number(value) : null);
|
|
10682
|
+
}
|
|
10683
|
+
}
|
|
10684
|
+
break;
|
|
10685
|
+
default:
|
|
10686
|
+
commands.setValue(name, value);
|
|
10687
|
+
break;
|
|
10688
|
+
}
|
|
10689
|
+
}
|
|
10690
|
+
});
|
|
10691
|
+
return commands.getAllFormValue();
|
|
10692
|
+
}
|
|
10693
|
+
}, [deHash]);
|
|
10694
|
+
/********************************************************************************************************************
|
|
10695
|
+
* hash
|
|
10696
|
+
* ******************************************************************************************************************/
|
|
10697
|
+
React.useEffect(function () {
|
|
10698
|
+
if (window.location.pathname === initPathRef.current) {
|
|
10699
|
+
var data = hashToSearchValue();
|
|
10700
|
+
if (data)
|
|
10701
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data);
|
|
10702
|
+
}
|
|
10703
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
10704
|
+
}, [window.location.hash]);
|
|
10705
|
+
var hashChange = React.useCallback(function (params) {
|
|
10706
|
+
if (onRequestHashChange) {
|
|
10707
|
+
var hashes_1 = [];
|
|
10708
|
+
Object.keys(params).forEach(function (name) {
|
|
10709
|
+
var value = params[name];
|
|
10710
|
+
if (searchRef.current) {
|
|
10711
|
+
var itemCommands = searchRef.current.getItem(name);
|
|
10712
|
+
if (itemCommands) {
|
|
10713
|
+
var resetValue = null;
|
|
10714
|
+
switch (itemCommands.getType()) {
|
|
10715
|
+
case 'FormDateRangePicker':
|
|
10716
|
+
case 'FormYearRangePicker':
|
|
10717
|
+
{
|
|
10718
|
+
var commands = itemCommands;
|
|
10719
|
+
var itemName = itemCommands.getName();
|
|
10720
|
+
var fromName = commands.getFormValueFromName();
|
|
10721
|
+
var fromSuffix = commands.getFormValueFromNameSuffix();
|
|
10722
|
+
var toName = commands.getFormValueToName();
|
|
10723
|
+
var toSuffix = commands.getFormValueToNameSuffix();
|
|
10724
|
+
if (name === fromName) {
|
|
10725
|
+
resetValue = searchRef.current.getFormReset(itemName, fromSuffix);
|
|
10726
|
+
}
|
|
10727
|
+
else if (name === toName) {
|
|
10728
|
+
resetValue = searchRef.current.getFormReset(itemName, toSuffix);
|
|
10729
|
+
}
|
|
10730
|
+
}
|
|
10731
|
+
break;
|
|
10732
|
+
case 'FormMonthPicker':
|
|
10733
|
+
{
|
|
10734
|
+
var commands = itemCommands;
|
|
10735
|
+
var itemName = commands.getName();
|
|
10736
|
+
var yearName = commands.getFormValueYearName();
|
|
10737
|
+
var yearSuffix = commands.getFormValueYearNameSuffix();
|
|
10738
|
+
var monthName = commands.getFormValueMonthName();
|
|
10739
|
+
var monthSuffix = commands.getFormValueMonthNameSuffix();
|
|
10740
|
+
if (name === yearName) {
|
|
10741
|
+
resetValue = searchRef.current.getFormReset(itemName, yearSuffix);
|
|
10742
|
+
}
|
|
10743
|
+
else if (name === monthName) {
|
|
10744
|
+
resetValue = searchRef.current.getFormReset(itemName, monthSuffix);
|
|
10745
|
+
}
|
|
10746
|
+
}
|
|
10747
|
+
break;
|
|
10748
|
+
case 'FormMonthRangePicker':
|
|
10749
|
+
{
|
|
10750
|
+
var commands = itemCommands;
|
|
10751
|
+
var itemName = commands.getName();
|
|
10752
|
+
var fromYearName = commands.getFormValueFromYearName();
|
|
10753
|
+
var fromYearSuffix = commands.getFormValueFromYearNameSuffix();
|
|
10754
|
+
var fromMonthName = commands.getFormValueFromMonthName();
|
|
10755
|
+
var fromMonthSuffix = commands.getFormValueFromMonthNameSuffix();
|
|
10756
|
+
var toYearName = commands.getFormValueToYearName();
|
|
10757
|
+
var toYearSuffix = commands.getFormValueToYearNameSuffix();
|
|
10758
|
+
var toMonthName = commands.getFormValueToMonthName();
|
|
10759
|
+
var toMonthSuffix = commands.getFormValueToMonthNameSuffix();
|
|
10760
|
+
if (name === fromYearName) {
|
|
10761
|
+
resetValue = searchRef.current.getFormReset(itemName, fromYearSuffix);
|
|
10762
|
+
}
|
|
10763
|
+
else if (name === fromMonthName) {
|
|
10764
|
+
resetValue = searchRef.current.getFormReset(itemName, fromMonthSuffix);
|
|
10765
|
+
}
|
|
10766
|
+
else if (name === toYearName) {
|
|
10767
|
+
resetValue = searchRef.current.getFormReset(itemName, toYearSuffix);
|
|
10768
|
+
}
|
|
10769
|
+
else if (name === toMonthName) {
|
|
10770
|
+
resetValue = searchRef.current.getFormReset(itemName, toMonthSuffix);
|
|
10771
|
+
}
|
|
10772
|
+
}
|
|
10773
|
+
break;
|
|
10774
|
+
default:
|
|
10775
|
+
resetValue = searchRef.current.getFormReset(name);
|
|
10776
|
+
break;
|
|
10777
|
+
}
|
|
10778
|
+
if (resetValue != null && !util.equal(resetValue, value) && typeof value !== 'object') {
|
|
10779
|
+
hashes_1.push("".concat(name, "=").concat(encodeURIComponent(value)));
|
|
10780
|
+
}
|
|
10781
|
+
}
|
|
10782
|
+
}
|
|
10783
|
+
});
|
|
10784
|
+
var finalHash = hashes_1.join('&');
|
|
10785
|
+
if (window.location.hash.substring(1) === finalHash) {
|
|
10786
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(params);
|
|
10787
|
+
}
|
|
10788
|
+
else {
|
|
10789
|
+
onRequestHashChange(hashes_1.join('&'));
|
|
10790
|
+
}
|
|
10791
|
+
}
|
|
10792
|
+
}, [onRequestHashChange, onSubmit]);
|
|
10793
|
+
/********************************************************************************************************************
|
|
10794
|
+
* Event Handler
|
|
10795
|
+
* ******************************************************************************************************************/
|
|
10796
|
+
var handleSubmit = React.useCallback(function (data) {
|
|
10797
|
+
if (isFirstSearchSubmit) {
|
|
10798
|
+
setIsFirstSearchSubmit(false);
|
|
10799
|
+
}
|
|
10800
|
+
else {
|
|
10801
|
+
hashChange(data);
|
|
10802
|
+
}
|
|
10803
|
+
}, [hashChange, isFirstSearchSubmit]);
|
|
10804
|
+
/********************************************************************************************************************
|
|
10805
|
+
* Render
|
|
10806
|
+
* ******************************************************************************************************************/
|
|
10807
|
+
return (React.createElement(Search, __assign({ ref: function (r) {
|
|
10808
|
+
searchRef.current = r;
|
|
10809
|
+
if (ref) {
|
|
10810
|
+
if (typeof ref === 'function') {
|
|
10811
|
+
ref(r);
|
|
10812
|
+
}
|
|
10813
|
+
else {
|
|
10814
|
+
ref.current = r;
|
|
10815
|
+
}
|
|
10816
|
+
}
|
|
10817
|
+
} }, props, { onSubmit: handleSubmit })));
|
|
10818
|
+
});exports.Form=Form;exports.FormAutocomplete=FormAutocomplete;exports.FormBlock=FormBlock;exports.FormBody=FormBody;exports.FormButton=FormButton$1;exports.FormCheckbox=FormCheckbox;exports.FormCol=FormCol;exports.FormCompanyNo=FormCompanyNo;exports.FormContext=FormContext;exports.FormContextDefaultValue=FormContextDefaultValue;exports.FormContextProvider=FormContextProvider;exports.FormDatePicker=FormDatePicker;exports.FormDateRangePicker=FormDateRangePicker;exports.FormDateTimePicker=FormDateTimePicker;exports.FormDivider=FormDivider;exports.FormEmail=FormEmail;exports.FormFile=FormFile;exports.FormFooter=FormFooter;exports.FormHidden=FormHidden;exports.FormImageFile=FormImageFile;exports.FormLabel=FormLabel$1;exports.FormMobile=FormMobile;exports.FormMonthPicker=FormMonthPicker;exports.FormMonthRangePicker=FormMonthRangePicker;exports.FormNumber=FormNumber;exports.FormPassword=FormPassword;exports.FormPersonalNo=FormPersonalNo;exports.FormRadioGroup=FormRadioGroup;exports.FormRating=FormRating;exports.FormRow=FormRow;exports.FormSearch=FormSearch;exports.FormSelect=FormSelect;exports.FormSwitch=FormSwitch;exports.FormTag=FormTag;exports.FormTel=FormTel;exports.FormText=FormText;exports.FormTextEditor=FormTextEditor;exports.FormTextField=FormTextField;exports.FormTextarea=FormTextarea;exports.FormTimePicker=FormTimePicker;exports.FormToggleButtonGroup=FormToggleButtonGroup;exports.FormUrl=FormUrl;exports.FormYearPicker=FormYearPicker;exports.FormYearRangePicker=FormYearRangePicker;exports.HashSearch=HashSearch;exports.Search=Search;exports.SearchButton=SearchButton$1;exports.SearchGroup=SearchGroup;exports.SearchGroupRow=SearchGroupRow;exports.SearchMenuButton=SearchMenuButton;exports.useFormState=useFormState;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdg/react-form",
|
|
3
3
|
"title": "React Form",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.150",
|
|
5
5
|
"description": "React Form",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@mui/icons-material": "^7.0.2",
|
|
46
46
|
"@mui/material": "^7.0.2",
|
|
47
47
|
"@mui/x-date-pickers": "^7.28.3",
|
|
48
|
-
"@pdg/react-component": "^1.0.
|
|
48
|
+
"@pdg/react-component": "^1.0.34",
|
|
49
49
|
"@pdg/react-hook": "^1.0.28",
|
|
50
50
|
"@pdg/util": "^1.0.23",
|
|
51
51
|
"@tinymce/tinymce-react": "^6.1.0",
|