jordy 0.16.0 → 0.17.0

package/esm5/index.js

@@ -1,7 +1,6 @@
 import { DeviceDetectProvider, withAdaptiveRender } from './adaptive-render';
 import { cache } from './proxies';
 import { useRouteSystem } from './route-system';
-import validate, { mergeValidates, } from './validate';
 export * from './http-api';
 export * from './hooks';
 export * from './queries';
@@ -9,4 +8,5 @@ export * from './storage';
 export * from './types';
 export * from './util';
 export * from './jwt';
-export { DeviceDetectProvider, withAdaptiveRender, cache, useRouteSystem, validate, mergeValidates, };
+export * from './validate';
+export { DeviceDetectProvider, withAdaptiveRender, cache, useRouteSystem, };

package/esm5/util/etc.js

@@ -10,3 +10,23 @@ export function timeout(time, value, stopCallback) {
     });
 }
 export function noop() { }
+function findAndFocus(key) {
+    try {
+        var input = document.querySelector("*[name=\"".concat(key, "\"], *[data-name=\"").concat(key, "\"]"));
+        input && input.focus();
+        return Boolean(input);
+    }
+    catch (error) {
+        return false;
+    }
+}
+export function focusByNames(inputNames) {
+    if (Array.isArray(inputNames)) {
+        return inputNames.some(function (key) {
+            var input = document.querySelector("*[name=\"".concat(key, "\"], *[data-name=\"").concat(key, "\"]"));
+            input && input.focus();
+            return Boolean(input);
+        });
+    }
+    return findAndFocus(inputNames);
+}

package/esm5/util/refine.js

@@ -11,7 +11,20 @@ export function createEnumRefiner(enumType, def) {
 }
 export function createPageSizeRefiner(sizeList, defaultIndex) {
     if (defaultIndex === void 0) { defaultIndex = 0; }
-    return createEnumRefiner(sizeList, sizeList[defaultIndex]);
+    if (defaultIndex < 0 || defaultIndex > sizeList.length - 1) {
+        throw new Error("invalid defaultIndex: ".concat(defaultIndex));
+    }
+    return function refineForEnum(target) {
+        try {
+            var page = Number(target);
+            if (sizeList.includes(page)) {
+                return page;
+            }
+        }
+        catch (error) {
+        }
+        return sizeList[defaultIndex];
+    };
 }
 export function refinePageNumber(raw) {
     var page = Math.floor(Math.abs(Number(raw || 1)));

package/esm5/validate/index.js

@@ -1,7 +1,7 @@
-import { validate } from './validate';
+import { validate as validateOrigin } from './validate';
 import fn from './fn';
-var validateFn = validate;
+export var validateFn = validateOrigin;
 validateFn.fn = fn;
-export default validateFn;
 export * from './mergeValidates';
 export * from './validate.type';
+export * from './useValidate';

package/esm5/validate/mergeValidates.js

@@ -15,7 +15,6 @@ export function mergeValidates() {
         }
         Array.prototype.push.apply(acc.invalidKeys, arg.invalidKeys);
         acc.isValid = acc.isValid && arg.isValid;
-        acc.results = __assign(__assign({}, acc.results), arg.results);
         Array.prototype.push.apply(acc.validKeys, arg.validKeys);
         return acc;
     }, validateSubUtils.createValidateBulkResultModel());

package/esm5/validate/useValidate.js

@@ -0,0 +1,115 @@
+import { __assign, __read } from "tslib";
+import { focusByNames } from '../util/etc';
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { validateSubUtils } from './validateSubUtils';
+function getValidStatus(msg) {
+    if (!msg) {
+        return {};
+    }
+    return {
+        validateStatus: 'error',
+        help: msg,
+    };
+}
+function dispatchField(setState, setMessage, prevValue, arg0, arg1) {
+    if (typeof arg0 === 'string') {
+        var name_1 = arg0;
+        var value_1 = arg1;
+        setState(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[name_1] = value_1, _a)));
+        });
+        setMessage(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[name_1] = '', _a)));
+        });
+        return;
+    }
+    var nextValue;
+    if (typeof arg0 === 'function') {
+        nextValue = arg0(__assign({}, prevValue));
+    }
+    else if (typeof arg0 === 'object') {
+        nextValue = arg0;
+    }
+    else {
+        return;
+    }
+    setState(__assign(__assign({}, prevValue), nextValue));
+    setMessage(function (prev) {
+        return Object.keys(nextValue).reduce(function (acc, key) {
+            acc[key] = '';
+            return acc;
+        }, __assign({}, prev));
+    });
+}
+export function useValidate(initData, validateFn, autoFocusOnError) {
+    if (autoFocusOnError === void 0) { autoFocusOnError = false; }
+    var _a = __read(useState(initData), 2), state = _a[0], setState = _a[1];
+    var refInitState = useRef(state);
+    var refState = useRef(state);
+    var refResult = useRef(null);
+    var _b = __read(useState({}), 2), message = _b[0], setMessage = _b[1];
+    useLayoutEffect(function () {
+        refState.current = state;
+    }, [state]);
+    var setField = useCallback((function (arg0, arg1) {
+        dispatchField(setState, setMessage, refState.current, arg0, arg1);
+    }), []);
+    var setFieldMessage = useCallback((function (arg0, arg1) {
+        if (typeof arg0 === 'object') {
+            setMessage(function (prev) { return (__assign(__assign({}, prev), arg0)); });
+            return;
+        }
+        setMessage(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[arg0] = arg1, _a)));
+        });
+    }), []);
+    var clearMessage = useCallback(function () {
+        setMessage({});
+        refResult.current = null;
+    }, []);
+    var reset = useCallback(function () {
+        setMessage({});
+        setState(refInitState.current);
+        refResult.current = null;
+    }, []);
+    var getAntdStatus = useCallback(function (name) {
+        return getValidStatus(message[name]);
+    }, [message]);
+    var doValidate = useCallback(function () {
+        if (!validateFn) {
+            return validateSubUtils.createValidateBulkResultModel();
+        }
+        var result = validateFn(refState.current);
+        if (result.isValid === false) {
+            refResult.current = result;
+            setMessage(result.errorMessages);
+            if (autoFocusOnError) {
+                focusByNames(result.invalidKeys);
+            }
+            return result;
+        }
+        refResult.current = null;
+        setMessage({});
+        return result;
+    }, [validateFn, autoFocusOnError]);
+    var focusAtFirstError = useCallback(function () {
+        var result = refResult.current;
+        if (result) {
+            focusByNames(result.invalidKeys);
+        }
+    }, []);
+    return {
+        state: state,
+        errorMessage: message,
+        setField: setField,
+        setMessage: setFieldMessage,
+        clearMessage: clearMessage,
+        reset: reset,
+        validate: doValidate,
+        focusAtFirstError: focusAtFirstError,
+        getAntdStatus: getAntdStatus,
+    };
+}

package/esm5/validate/validate.js

@@ -4,8 +4,7 @@ export function validate(state, opt) {
     return Object.keys(opt).reduce(function (acc, key) {
         var val = state[key];
         var items = opt[key];
-        var _mRet = validateBulk(val, items);
-        acc.results[key] = _mRet;
+        var _mRet = validateBulk(val, state, items);
         acc.isValid = acc.isValid && _mRet.result;
         if (_mRet.result) {
             acc.validKeys.push(key);

package/esm5/validate/validateSubUtils.js

@@ -1,7 +1,6 @@
 function createValidateBulkResultModel() {
     var result = {
         isValid: true,
-        results: {},
         validKeys: [],
         invalidKeys: [],
         firstMessage: '',
@@ -9,20 +8,20 @@ function createValidateBulkResultModel() {
     };
     return result;
 }
-function validateSingle(val, _a) {
+function validateSingle(val, state, _a) {
     var check = _a.check, message = _a.message;
-    var result = check(val);
+    var result = check(val, state);
     var msg = !result ? message : '';
     return {
         result: result,
         message: msg,
     };
 }
-function checkIgnore(ignore, val) {
+function checkIgnore(ignore, val, state) {
     if (!ignore) {
         return false;
     }
-    return ignore === true || ignore(val);
+    return ignore === true || ignore(val, state);
 }
 function createValidateResultModel() {
     return {
@@ -30,14 +29,14 @@ function createValidateResultModel() {
         message: '',
     };
 }
-function validateBulk(val, opt) {
+function validateBulk(val, state, opt) {
     var mRes;
     if (Array.isArray(opt)) {
-        if (opt.length > 0 && checkIgnore(opt[0].ignore, val)) {
+        if (opt.length > 0 && checkIgnore(opt[0].ignore, val, state)) {
             return createValidateResultModel();
         }
         opt.every(function (_opt) {
-            var _mRes = validateSingle(val, _opt);
+            var _mRes = validateSingle(val, state, _opt);
             if (!_mRes.result) {
                 mRes = _mRes;
             }
@@ -52,10 +51,10 @@ function validateBulk(val, opt) {
         };
     }
     else {
-        if (checkIgnore(opt.ignore, val)) {
+        if (checkIgnore(opt.ignore, val, state)) {
             return createValidateResultModel();
         }
-        mRes = validateSingle(val, opt);
+        mRes = validateSingle(val, state, opt);
     }
     return mRes || createValidateResultModel();
 }

package/libs/index.d.ts

@@ -1,7 +1,6 @@
 import { DeviceDetectProvider, withAdaptiveRender } from './adaptive-render';
 import { cache } from './proxies';
 import { ModuleRouteModel, useRouteSystem } from './route-system';
-import validate, { mergeValidates, ValidateBulkOptionType, ValidateBulkResultModel, ValidateCheckModel, ValidateResultModel } from './validate';
 export * from './http-api';
 export * from './hooks';
 export * from './queries';
@@ -9,4 +8,5 @@ export * from './storage';
 export * from './types';
 export * from './util';
 export * from './jwt';
-export { ModuleRouteModel, DeviceDetectProvider, withAdaptiveRender, cache, useRouteSystem, validate, mergeValidates, ValidateResultModel, ValidateBulkResultModel, ValidateCheckModel, ValidateBulkOptionType, };
+export * from './validate';
+export { ModuleRouteModel, DeviceDetectProvider, withAdaptiveRender, cache, useRouteSystem, };

package/libs/util/etc.d.ts

@@ -9,3 +9,11 @@ export declare function timeout<T = void>(time: number, value?: T, stopCallback?
  * 아무것도 수행하지 않는 빈 함수이다.
  */
 export declare function noop(): void;
+/**
+ * 주어진 값을 바탕으로 `name` 혹은 `data-name` 속성값이 지정된 요소를 찾는다.
+ *
+ * 그리고 그 중 가장 첫번째 것에 포커스를 준다.
+ * @param inputNames
+ * @returns
+ */
+export declare function focusByNames(inputNames: string | string[]): boolean;

package/libs/validate/index.d.ts

@@ -1,6 +1,6 @@
-import { validate } from './validate';
+import { validate as validateOrigin } from './validate';
 import fn from './fn';
-declare type ValidationCheckerType = typeof validate & {
+declare type ValidationCheckerType = typeof validateOrigin & {
     fn: typeof fn;
 };
 /**
@@ -17,7 +17,7 @@ declare type ValidationCheckerType = typeof validate & {
       password: string;
     }
 
-    function execValidation(user: UserModel) {
+    function validateUserModel(user: UserModel) {
       const result = validate(user, {
         // 한가지 검증일 땐 객체로 넘겨준다.
         name: {
@@ -52,7 +52,7 @@ declare type ValidationCheckerType = typeof validate & {
  *
  * @see ValidateBulkResultModel
  */
-declare const validateFn: ValidationCheckerType;
-export default validateFn;
+export declare const validateFn: ValidationCheckerType;
 export * from './mergeValidates';
 export * from './validate.type';
+export * from './useValidate';

package/libs/validate/mergeValidates.d.ts

@@ -15,7 +15,7 @@ import { ValidateBulkResultModel } from './validate.type';
  * console.log(result.isValid); // 유효할 경우 true
  * ```
  *
- * @param args 하나로
+ * @param args 하나로 만들 여러 유효성 검증 결과들.
  * @returns {ValidateBulkResultModel}
  */
 export declare function mergeValidates(...args: ValidateBulkResultModel[]): ValidateBulkResultModel;

package/libs/validate/useValidate.d.ts

@@ -0,0 +1,132 @@
+import { AntdFormItemValidationMessageDto, ValidateBulkResultModel } from './validate.type';
+interface FieldDispatch<T> {
+    (name: keyof T, value: any): void;
+    (name: string, value: any): void;
+    (next: Partial<T>): void;
+    (setter: (prev: T) => Partial<T>): void;
+}
+interface MessageDispatch<T> {
+    (name: keyof T, message: string): void;
+    (messageDic: Partial<{
+        [key in keyof T]: string;
+    }>): void;
+}
+interface ValidateHookResult<T> {
+    /**
+     * 사용될 상태값.
+     */
+    state: T;
+    /**
+     * 각 상태 항목별 오류 메시지가 담긴 객체.
+     */
+    errorMessage: Partial<Record<keyof T, string>>;
+    /**
+     * 특정 필드의 상태값을 바꾼다.
+     *
+     * 변경된 필드명에 대응되는 오류 메시지는 자동으로 빈값으로 초기화된다.
+     */
+    setField: FieldDispatch<T>;
+    /**
+     * 특정 필드의 메시지값을 바꾼다.
+     */
+    setMessage: MessageDispatch<T>;
+    /**
+     * 현재 지정된 오류 메시지를 모두 빈값으로 초기화한다.
+     */
+    clearMessage(): void;
+    /**
+     * 메시지와 상태값을 모두 초기 상태로 되돌린다.
+     */
+    reset(): void;
+    /**
+     * 설정된 내부 상태값을 기반으로 유효성 검증을 수행한다.
+     *
+     * 검증에 실패했을 경우, 발생된 에러 메시지를 모두 `message` 필드에 자동으로 반영한다.
+     */
+    validate(): ValidateBulkResultModel;
+    /**
+     * 처음 오류가 발생된 입력 요소에 포커스를 준다.
+     */
+    focusAtFirstError(): void;
+    /**
+     * antd 에서 Form.Item 과 응용할 때 쓰인다.
+     * @example
+     * ```tsx
+     * const { state, setField, getAntdStatus } = useValidate({ name: '' });
+     *
+     * <Form.Item {...getAntdStatus('name')}>
+     *   <Input
+     *     value={status.name}
+     *     onChange={(e) => setField('name', e.target.value)}
+     *   />
+     * </Form.Item>
+     * ```
+     * @param name 메시지와 상태를 가져올 필드명.
+     */
+    getAntdStatus(name: keyof T): AntdFormItemValidationMessageDto;
+}
+/**
+ * 유효성 검증과 상태 제어 기능을 제공하는 훅스.
+ * @param initData 설정할 초기 데이터
+ * @param validateFn 유효성 검증에 필요한 함수. 설정하지 않으면 유효성 검증을 무시한다.
+ * @param autoFocusOnError 유효성 검증 실패 시 가장 첫번째 입력 요소에 자동으로 포커스를 준다. 기본 false.
+ * @returns
+ *
+ * @example
+ * ```tsx
+ * import { validate, useValidate } from 'jordy';
+ *
+ * function validateData(data: MyModel) {
+ *   return validate(data, {
+ *     // 유효성 검증 코드
+ *   });
+ * }
+ *
+ * function ViewComponent() {
+ *   const {
+ *     state,
+ *     setField,
+ *     errorMessage,
+ *     validate,
+ *     getAntdStatus
+ *   } = useValidate(
+ *     createMyModel,
+ *     validateData,
+ *   );
+ *
+ *   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+ *     e.preventDefault();
+ *
+ *     const result = validate();
+ *
+ *     if (result.isValid) {
+ *       alert('작성 완료!');
+ *     } else {
+ *       alert(result.firstMessage);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit}>
+ *       <input
+ *         value={state.textInput}
+ *         onChange={({ target }) => setField('textInput', target.value)}
+ *       />
+ *       <p>{errorMessage.textInput}</p>
+ *
+ *       -- antd 활용 --
+ *       <Form.Item {...getAntdStatus('textInput')}>
+ *         <Input
+ *           value={state.textInput}
+ *           onChange={({ target }) => setField('textInput', target.value)}
+ *         />
+ *       </Form.Item>
+ *
+ *       <button>보내기</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export declare function useValidate<T extends Record<string, any>>(initData: T | (() => T), validateFn?: (data: T) => ValidateBulkResultModel, autoFocusOnError?: boolean): ValidateHookResult<T>;
+export {};

package/libs/validate/validate.type.d.ts

@@ -36,10 +36,6 @@ export interface ValidateBulkResultModel extends ErrorMessagesModel {
      * 전체 유효성 검증 통과 여부. true 면 통과, false 면 아님
      */
     isValid: boolean;
-    /**
-     * 각 필드별 결과. key 로 접근할 수 있다.
-     */
-    results: Record<string, ValidateResultModel>;
     /**
      * 유효했던 키 목록
      */
@@ -56,15 +52,15 @@ export interface ValidateBulkResultModel extends ErrorMessagesModel {
 /**
  * 유효성 체크 요청에 쓰이는 모델.
  */
-export interface ValidateCheckModel<T> {
+export interface ValidateCheckModel<T, S> {
     /**
      * 해당 유효성 체크를 무시하는 조건.
      *
      * 설정하여 그 결과값이 true 라면 해당 필드의 모든 유효성 체크를 무시한다.
      *
-     * 설정 시 가장 첫번째 유효성 체크 설정에만 유효하다.
+     * 가장 첫번째 유효성 체크 설정에만 유효하다.
      */
-    ignore?: ((val: T) => boolean) | boolean;
+    ignore?: ((val: T, state: S) => boolean) | boolean;
     /**
      * 유효성 체크에 실패 했을 때 출력될 메시지
      */
@@ -74,11 +70,24 @@ export interface ValidateCheckModel<T> {
      *
      * 결과가 false 면 유효성 체크에 실패 한 것으로 간주한다.
      */
-    check: (val: T) => boolean;
+    check: (val: T, state: S) => boolean;
 }
 /**
  * 유효성 체크를 한번에 실시 할 때 쓰이는 모델. key : value 로 이뤄져 있다.
  */
 export declare type ValidateBulkOptionType<T extends Record<string, any>> = {
-    [key in keyof T]?: ValidateCheckModel<T[key]> | ValidateCheckModel<T[key]>[] | ((value: T[key]) => ValidateBulkResultModel);
+    [key in keyof T]?: ValidateCheckModel<T[key], T> | ValidateCheckModel<T[key], T>[] | ((value: T[key], state: T) => ValidateBulkResultModel);
 };
+/**
+ * antd 의 Form.Item 컴포넌트에 응용되는 유효성 체크 자료.
+ */
+export interface AntdFormItemValidationMessageDto {
+    /**
+     * 오류여부
+     */
+    validateStatus?: 'error';
+    /**
+     * 알려줄 유효성 메시지
+     */
+    help?: string;
+}

package/libs/validate/validateSubUtils.d.ts

@@ -1,8 +1,8 @@
 import { ValidateBulkResultModel, ValidateCheckModel, ValidateResultModel } from './validate.type';
 declare function createValidateBulkResultModel(): ValidateBulkResultModel;
-declare function validateSingle<T>(val: T, { check, message }: ValidateCheckModel<T>): ValidateResultModel;
-declare function checkIgnore<T>(ignore: undefined | boolean | ((val: T) => boolean), val: T): boolean;
-declare function validateBulk<T>(val: T, opt: ValidateCheckModel<T> | ValidateCheckModel<T>[] | ((value: T) => ValidateBulkResultModel)): ValidateResultModel;
+declare function validateSingle<T, S>(val: T, state: S, { check, message }: ValidateCheckModel<T, S>): ValidateResultModel;
+declare function checkIgnore<T, S>(ignore: undefined | boolean | ((val: T, state: S) => boolean), val: T, state: S): boolean;
+declare function validateBulk<T, S>(val: T, state: S, opt: ValidateCheckModel<T, S> | ValidateCheckModel<T, S>[] | ((value: T) => ValidateBulkResultModel)): ValidateResultModel;
 export declare const validateSubUtils: {
     createValidateBulkResultModel: typeof createValidateBulkResultModel;
     validateSingle: typeof validateSingle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jordy",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "typescript based frontend toolkit",
   "repository": {
     "type": "git",