matsuri-ui 9.7.2 → 9.8.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [9.8.0](https://github.com/matsuri-tech/matsuri-ui/compare/v9.7.2...v9.8.0) (2021-10-26)
+
+
+### Features
+
+* **components:** add DateTextField ([96d2d4a](https://github.com/matsuri-tech/matsuri-ui/commit/96d2d4a7bdeb25537a5c1359ef1afe09fc272a0a))
+* **DateTextField:** custom delimiter ([a42c99d](https://github.com/matsuri-tech/matsuri-ui/commit/a42c99dbc38c963e584ba5d2fb2843b03776a4d3))
+* **hooks/useOnClickOutside:** allow multiple elements to be targeted ([830689d](https://github.com/matsuri-tech/matsuri-ui/commit/830689d574efecacc895579d99a992d95b47daf1))
+
+
+### Bug Fixes
+
+* nth-of-type instead of nth-child ([aae0ac9](https://github.com/matsuri-tech/matsuri-ui/commit/aae0ac9d7205aa8d38f2e3d63f5a188864e5dbc8))
+* **DateTextField:** regexp to unformat ([216a00d](https://github.com/matsuri-tech/matsuri-ui/commit/216a00da49da377fe2d6cadb0467887f1943552a))
+
 ### [9.7.2](https://github.com/matsuri-tech/matsuri-ui/compare/v9.7.2-alpha.0...v9.7.2) (2021-09-24)
 
 ### [9.7.2-alpha.0](https://github.com/matsuri-tech/matsuri-ui/compare/v9.7.1...v9.7.2-alpha.0) (2021-09-24)

package/dist/cjs/DateTextField/DateTextField.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTextField = void 0;
+
+var _FormControl = require("../FormControl");
+
+var _FormHelperText = require("../FormHelperText");
+
+var _InputBase = require("../InputBase");
+
+var _InputLabel = require("../InputLabel");
+
+var _useDitectInputTouched = require("../TextField/useDitectInputTouched");
+
+var _useValidation = require("../TextField/useValidation");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const validateDate = (date, format) => {
+  return (0, _dayjs.default)(date, format).format(format) === date;
+};
+
+const DateTextField = ({
+  className,
+  style,
+  label,
+  onChange,
+  validationMessages,
+  customValidations: propsCustomValidations = [],
+  value: propsValue,
+  defaultValue,
+  min,
+  max,
+  readOnly,
+  disabled,
+  bottomGutter,
+  helperText,
+  invalid,
+  delimiter = "/",
+  ...props
+}) => {
+  const ref = (0, _react.useRef)(null);
+  const template = (0, _react.useMemo)(() => ["YYYY", "MM", "DD"].join(delimiter), [delimiter]);
+  const formater = (0, _react.useCallback)(value => {
+    const format = /([\d*]{0,4})([\d*]{0,2})?([\d*]{0,2})?/;
+    const execResult = format.exec(value.split(delimiter).join(""));
+    const validValues = (execResult === null || execResult === void 0 ? void 0 : execResult.splice(1, 3).filter(x => x)) || [];
+    return validValues.join(delimiter) + (value.length === 4 || value.length === 6 ? delimiter : "");
+  }, [delimiter]);
+  const [value, setValue] = (0, _react.useState)(() => {
+    const value = propsValue || defaultValue;
+    return value ? formater(value.replace(/[^0-9]/g, "")) : "";
+  });
+  const customValidations = (0, _react.useMemo)(() => {
+    const pattern = new RegExp(["[0-9]{4}", "(0[1-9]|1[012])", "(0[1-9]|[12][0-9]|3[01])"].join(delimiter));
+    const lightPattern = new RegExp(["[\\d*]{4}", "[\\d*]{2}", "[\\d*]{2}"].join(delimiter));
+
+    const patternMismatchValidation = value => {
+      if (!lightPattern.test(value)) {
+        return false;
+      }
+
+      return !validateDate(value, template) && ((validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.patternMismatch) || `有効な日付を${template}形式で入力してください`);
+    };
+
+    const rangeUnderflowValidation = value => {
+      if (!min) {
+        return false;
+      }
+
+      if (!pattern.test(value)) {
+        return false;
+      }
+
+      return (0, _dayjs.default)(value).isBefore((0, _dayjs.default)(min)) && ((validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeUnderflow) || `${(0, _dayjs.default)(min).format(template)} 以降の値を指定する必要があります。`);
+    };
+
+    const rangeOverflowValidation = value => {
+      if (!max) {
+        return false;
+      }
+
+      if (!pattern.test(value)) {
+        return false;
+      }
+
+      return (0, _dayjs.default)(value).isAfter((0, _dayjs.default)(max)) && ((validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeOverflow) || `${(0, _dayjs.default)(max).format(template)} 以前の値を指定する必要があります。`);
+    };
+
+    return [...propsCustomValidations, patternMismatchValidation, rangeUnderflowValidation, rangeOverflowValidation];
+  }, [delimiter, max, min, propsCustomValidations, template, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.patternMismatch, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeOverflow, validationMessages === null || validationMessages === void 0 ? void 0 : validationMessages.rangeUnderflow]);
+  const validation = (0, _useValidation.useValidation)({
+    ref,
+    validationMessages,
+    customValidations,
+    value
+  });
+  /**
+   * Handling
+   */
+
+  const handleChange = (0, _react.useCallback)(event => {
+    const formatedValue = event.currentTarget.value || "";
+    const value = formatedValue.replace(new RegExp(delimiter, "g"), "");
+    setValue(formater(value));
+
+    if (onChange) {
+      onChange(formater(value), event);
+    }
+
+    const element = event.currentTarget;
+    let cursorPosition = element === null || element === void 0 ? void 0 : element.selectionStart;
+    requestAnimationFrame(() => {
+      if (document.activeElement !== element) return;
+      if (cursorPosition === null) return;
+
+      if (element.value[cursorPosition - 1] === delimiter) {
+        cursorPosition = cursorPosition + 1;
+      }
+
+      element.setSelectionRange(cursorPosition, cursorPosition);
+    });
+  }, [delimiter, formater, onChange]);
+  /**
+   * External Update Value
+   */
+
+  (0, _react.useEffect)(() => {
+    if (propsValue) {
+      setValue(propsValue);
+    }
+  }, [propsValue]);
+  const [touched, additionalProps] = (0, _useDitectInputTouched.useDitectInputTouched)();
+  return (0, _react2.jsx)(_FormControl.FormControl, {
+    style: style,
+    className: className
+  }, (0, _react2.jsx)(_InputLabel.InputLabel, {
+    "aria-disabled": disabled,
+    required: props.required
+  }, label), (0, _react2.jsx)(_InputBase.InputBase, _extends({
+    ref: ref,
+    onChange: handleChange,
+    type: "text",
+    readOnly: readOnly
+  }, props, {
+    disabled: disabled,
+    value: value,
+    "data-invalid": !validation.valid
+  }, additionalProps)), touched && validation.message ? (0, _react2.jsx)(_FormHelperText.FormHelperText, {
+    bottomGutter: bottomGutter,
+    invalid: !validation.valid
+  }, validation.message) : (0, _react2.jsx)(_FormHelperText.FormHelperText, {
+    bottomGutter: bottomGutter,
+    invalid: invalid
+  }, typeof helperText === "function" ? helperText({
+    value
+  }) : helperText));
+};
+
+exports.DateTextField = DateTextField;
+//# sourceMappingURL=DateTextField.js.map

package/dist/cjs/DateTextField/DateTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DateTextField/DateTextField.tsx"],"names":["validateDate","date","format","DateTextField","className","style","label","onChange","validationMessages","customValidations","propsCustomValidations","value","propsValue","defaultValue","min","max","readOnly","disabled","bottomGutter","helperText","invalid","delimiter","props","ref","template","join","formater","execResult","exec","split","validValues","splice","filter","x","length","setValue","replace","pattern","RegExp","lightPattern","patternMismatchValidation","test","patternMismatch","rangeUnderflowValidation","isBefore","rangeUnderflow","rangeOverflowValidation","isAfter","rangeOverflow","validation","handleChange","event","formatedValue","currentTarget","element","cursorPosition","selectionStart","requestAnimationFrame","document","activeElement","setSelectionRange","touched","additionalProps","required","valid","message"],"mappings":"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","sourcesContent":["import { FieldProps } from \"../TextField\"\nimport { FormControl } from \"../FormControl\"\nimport { FormHelperText, InputBottomGutterProps } from \"../FormHelperText\"\nimport { InputBase, InputBaseProps } from \"../InputBase\"\nimport { InputLabel } from \"../InputLabel\"\nimport { useDitectInputTouched } from \"../TextField/useDitectInputTouched\"\nimport { useValidation } from \"../TextField/useValidation\"\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport dayjs from \"dayjs\"\n\nexport interface DateTextFieldProps\n    extends FieldProps<string>,\n        Omit<InputBaseProps, \"defaultValue\" | \"value\" | \"onChange\">,\n        InputBottomGutterProps {\n    type?: never\n    /**\n     * @default \"/\"\n     * @description 日付を区切るための文字列。\n     */\n    delimiter?: string\n}\n\nconst validateDate = (date: string, format: string) => {\n    return dayjs(date, format).format(format) === date\n}\n\nexport const DateTextField = ({\n    className,\n    style,\n    label,\n    onChange,\n    validationMessages,\n    customValidations: propsCustomValidations = [],\n    value: propsValue,\n    defaultValue,\n    min,\n    max,\n    readOnly,\n    disabled,\n    bottomGutter,\n    helperText,\n    invalid,\n    delimiter = \"/\",\n    ...props\n}: DateTextFieldProps) => {\n    const ref = useRef<HTMLInputElement>(null)\n\n    const template = useMemo(() => [\"YYYY\", \"MM\", \"DD\"].join(delimiter), [delimiter])\n\n    const formater = useCallback(\n        (value: string) => {\n            const format = /([\\d*]{0,4})([\\d*]{0,2})?([\\d*]{0,2})?/\n            const execResult = format.exec(value.split(delimiter).join(\"\"))\n            const validValues = execResult?.splice(1, 3).filter((x) => x) || []\n            return validValues.join(delimiter) + (value.length === 4 || value.length === 6 ? delimiter : \"\")\n        },\n        [delimiter]\n    )\n\n    const [value, setValue] = useState(() => {\n        const value = propsValue || defaultValue\n        return value ? formater(value.replace(/[^0-9]/g, \"\")) : \"\"\n    })\n\n    const customValidations = useMemo(() => {\n        const pattern = new RegExp([\"[0-9]{4}\", \"(0[1-9]|1[012])\", \"(0[1-9]|[12][0-9]|3[01])\"].join(delimiter))\n        const lightPattern = new RegExp([\"[\\\\d*]{4}\", \"[\\\\d*]{2}\", \"[\\\\d*]{2}\"].join(delimiter))\n\n        const patternMismatchValidation = (value: string) => {\n            if (!lightPattern.test(value)) {\n                return false\n            }\n            return (\n                !validateDate(value, template) &&\n                (validationMessages?.patternMismatch || `有効な日付を${template}形式で入力してください`)\n            )\n        }\n        const rangeUnderflowValidation = (value: string) => {\n            if (!min) {\n                return false\n            }\n            if (!pattern.test(value)) {\n                return false\n            }\n            return (\n                dayjs(value).isBefore(dayjs(min)) &&\n                (validationMessages?.rangeUnderflow ||\n                    `${dayjs(min).format(template)} 以降の値を指定する必要があります。`)\n            )\n        }\n        const rangeOverflowValidation = (value: string) => {\n            if (!max) {\n                return false\n            }\n            if (!pattern.test(value)) {\n                return false\n            }\n            return (\n                dayjs(value).isAfter(dayjs(max)) &&\n                (validationMessages?.rangeOverflow ||\n                    `${dayjs(max).format(template)} 以前の値を指定する必要があります。`)\n            )\n        }\n        return [...propsCustomValidations, patternMismatchValidation, rangeUnderflowValidation, rangeOverflowValidation]\n    }, [\n        delimiter,\n        max,\n        min,\n        propsCustomValidations,\n        template,\n        validationMessages?.patternMismatch,\n        validationMessages?.rangeOverflow,\n        validationMessages?.rangeUnderflow\n    ])\n\n    const validation = useValidation<string>({\n        ref,\n        validationMessages,\n        customValidations,\n        value\n    })\n\n    /**\n     * Handling\n     */\n    const handleChange = useCallback(\n        (event: React.ChangeEvent<HTMLInputElement>) => {\n            const formatedValue = event.currentTarget.value || \"\"\n            const value = formatedValue.replace(new RegExp(delimiter, \"g\"), \"\")\n            setValue(formater(value))\n            if (onChange) {\n                onChange(formater(value), event)\n            }\n            const element = event.currentTarget\n            let cursorPosition = element?.selectionStart\n\n            requestAnimationFrame(() => {\n                if (document.activeElement !== element) return\n                if (cursorPosition === null) return\n                if (element.value[cursorPosition - 1] === delimiter) {\n                    cursorPosition = cursorPosition + 1\n                }\n                element.setSelectionRange(cursorPosition, cursorPosition)\n            })\n        },\n        [delimiter, formater, onChange]\n    )\n\n    /**\n     * External Update Value\n     */\n    useEffect(() => {\n        if (propsValue) {\n            setValue(propsValue)\n        }\n    }, [propsValue])\n\n    const [touched, additionalProps] = useDitectInputTouched()\n\n    return (\n        <FormControl style={style} className={className}>\n            <InputLabel aria-disabled={disabled} required={props.required}>\n                {label}\n            </InputLabel>\n            <InputBase\n                ref={ref}\n                onChange={handleChange}\n                type=\"text\"\n                readOnly={readOnly}\n                {...props}\n                disabled={disabled}\n                value={value}\n                data-invalid={!validation.valid}\n                {...additionalProps}\n            />\n            {touched && validation.message ? (\n                <FormHelperText bottomGutter={bottomGutter} invalid={!validation.valid}>\n                    {validation.message}\n                </FormHelperText>\n            ) : (\n                <FormHelperText bottomGutter={bottomGutter} invalid={invalid}>\n                    {typeof helperText === \"function\" ? helperText({ value }) : helperText}\n                </FormHelperText>\n            )}\n        </FormControl>\n    )\n}\n"],"file":"DateTextField.js"}

package/dist/cjs/DateTextField/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DateTextField = require("./DateTextField");
+
+Object.keys(_DateTextField).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateTextField[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateTextField[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/DateTextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/DateTextField/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./DateTextField\"\n"],"file":"index.js"}

package/dist/cjs/Pagination/makePagination.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.makePagination = void 0;
+// first, ..., prev, current, next, ..., last
+const MINIMAL_PAGE_ITEM_COUNT = 7;
+
+const makePagination = (current, option) => {
+  const {
+    width,
+    total
+  } = option;
+
+  if (width < MINIMAL_PAGE_ITEM_COUNT) {
+    throw new Error(`Must allow at least ${MINIMAL_PAGE_ITEM_COUNT} page items`);
+  }
+
+  if (width % 2 === 0) {
+    throw new Error(`Must allow odd number of page items`);
+  }
+
+  if (total < width) {
+    return Array.from({
+      length: total
+    }, (_, i) => i);
+  }
+
+  const left = Math.max(0, Math.min(total - width, current - Math.floor(width / 2)));
+  const items = Array.from({
+    length: width
+  }, (_, i) => i + left);
+
+  if (items[0] > 0) {
+    items[0] = 0;
+    items[1] = "prev-more";
+  }
+
+  if (items[items.length - 1] < total - 1) {
+    items[items.length - 1] = total - 1;
+    items[items.length - 2] = "next-more";
+  }
+
+  return items;
+};
+
+exports.makePagination = makePagination;
+//# sourceMappingURL=makePagination.js.map

package/dist/cjs/Pagination/makePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Pagination/makePagination.ts"],"names":["MINIMAL_PAGE_ITEM_COUNT","makePagination","current","option","width","total","Error","Array","from","length","_","i","left","Math","max","min","floor","items"],"mappings":";;;;AAAA;AACA,MAAMA,uBAAuB,GAAG,CAAhC;;AASO,MAAMC,cAAc,GAAG,CAACC,OAAD,EAAkBC,MAAlB,KAA0D;AACpF,QAAM;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,MAAmBF,MAAzB;;AACA,MAAIC,KAAK,GAAGJ,uBAAZ,EAAqC;AACjC,UAAM,IAAIM,KAAJ,CAAW,uBAAsBN,uBAAwB,aAAzD,CAAN;AACH;;AACD,MAAII,KAAK,GAAG,CAAR,KAAc,CAAlB,EAAqB;AACjB,UAAM,IAAIE,KAAJ,CAAW,qCAAX,CAAN;AACH;;AACD,MAAID,KAAK,GAAGD,KAAZ,EAAmB;AACf,WAAOG,KAAK,CAACC,IAAN,CAAW;AAAEC,MAAAA,MAAM,EAAEJ;AAAV,KAAX,EAA8B,CAACK,CAAD,EAAIC,CAAJ,KAAUA,CAAxC,CAAP;AACH;;AACD,QAAMC,IAAI,GAAGC,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYD,IAAI,CAACE,GAAL,CAASV,KAAK,GAAGD,KAAjB,EAAwBF,OAAO,GAAGW,IAAI,CAACG,KAAL,CAAWZ,KAAK,GAAG,CAAnB,CAAlC,CAAZ,CAAb;AACA,QAAMa,KAAY,GAAGV,KAAK,CAACC,IAAN,CAAW;AAAEC,IAAAA,MAAM,EAAEL;AAAV,GAAX,EAA8B,CAACM,CAAD,EAAIC,CAAJ,KAAUA,CAAC,GAAGC,IAA5C,CAArB;;AACA,MAAIK,KAAK,CAAC,CAAD,CAAL,GAAW,CAAf,EAAkB;AACdA,IAAAA,KAAK,CAAC,CAAD,CAAL,GAAW,CAAX;AACAA,IAAAA,KAAK,CAAC,CAAD,CAAL,GAAW,WAAX;AACH;;AACD,MAAIA,KAAK,CAACA,KAAK,CAACR,MAAN,GAAe,CAAhB,CAAL,GAA0BJ,KAAK,GAAG,CAAtC,EAAyC;AACrCY,IAAAA,KAAK,CAACA,KAAK,CAACR,MAAN,GAAe,CAAhB,CAAL,GAA0BJ,KAAK,GAAG,CAAlC;AACAY,IAAAA,KAAK,CAACA,KAAK,CAACR,MAAN,GAAe,CAAhB,CAAL,GAA0B,WAA1B;AACH;;AACD,SAAOQ,KAAP;AACH,CAtBM","sourcesContent":["// first, ..., prev, current, next, ..., last\nconst MINIMAL_PAGE_ITEM_COUNT = 7\n\ninterface MakePaginationOption {\n    total: number\n    width: number\n}\n\ntype Items = (number | \"next-more\" | \"prev-more\")[]\n\nexport const makePagination = (current: number, option: MakePaginationOption): Items => {\n    const { width, total } = option\n    if (width < MINIMAL_PAGE_ITEM_COUNT) {\n        throw new Error(`Must allow at least ${MINIMAL_PAGE_ITEM_COUNT} page items`)\n    }\n    if (width % 2 === 0) {\n        throw new Error(`Must allow odd number of page items`)\n    }\n    if (total < width) {\n        return Array.from({ length: total }, (_, i) => i)\n    }\n    const left = Math.max(0, Math.min(total - width, current - Math.floor(width / 2)))\n    const items: Items = Array.from({ length: width }, (_, i) => i + left)\n    if (items[0] > 0) {\n        items[0] = 0\n        items[1] = \"prev-more\"\n    }\n    if (items[items.length - 1] < total - 1) {\n        items[items.length - 1] = total - 1\n        items[items.length - 2] = \"next-more\"\n    }\n    return items\n}\n"],"file":"makePagination.js"}

package/dist/cjs/Pagination/makePagination.test.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _makePagination = require("./makePagination");
+
+describe("makePagination", () => {
+  describe.each([[0, {
+    total: 20,
+    width: 7
+  }, [0, 1, 2, 3, 4, "next-more", 19]], [10, {
+    total: 20,
+    width: 7
+  }, [0, "prev-more", 9, 10, 11, "next-more", 19]], [20, {
+    total: 20,
+    width: 7
+  }, [0, "prev-more", 15, 16, 17, 18, 19]], [0, {
+    total: 5,
+    width: 7
+  }, [0, 1, 2, 3, 4]], [2, {
+    total: 5,
+    width: 7
+  }, [0, 1, 2, 3, 4]], [4, {
+    total: 5,
+    width: 7
+  }, [0, 1, 2, 3, 4]]])("current:%o, option:%o", (current, option, expected) => {
+    test(`f(${current})=[${expected}]`, () => {
+      const result = (0, _makePagination.makePagination)(current, option);
+      expect(result).toEqual(expected);
+    });
+  });
+});
+//# sourceMappingURL=makePagination.test.js.map

package/dist/cjs/Pagination/makePagination.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Pagination/makePagination.test.ts"],"names":["describe","each","total","width","current","option","expected","test","result","expect","toEqual"],"mappings":";;AAAA;;AAEAA,QAAQ,CAAC,gBAAD,EAAmB,MAAM;AAC7BA,EAAAA,QAAQ,CAACC,IAAT,CAAc,CACV,CAAC,CAAD,EAAI;AAAEC,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,KAAK,EAAE;AAApB,GAAJ,EAA6B,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,EAAgB,WAAhB,EAA6B,EAA7B,CAA7B,CADU,EAEV,CAAC,EAAD,EAAK;AAAED,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,KAAK,EAAE;AAApB,GAAL,EAA8B,CAAC,CAAD,EAAI,WAAJ,EAAiB,CAAjB,EAAoB,EAApB,EAAwB,EAAxB,EAA4B,WAA5B,EAAyC,EAAzC,CAA9B,CAFU,EAGV,CAAC,EAAD,EAAK;AAAED,IAAAA,KAAK,EAAE,EAAT;AAAaC,IAAAA,KAAK,EAAE;AAApB,GAAL,EAA8B,CAAC,CAAD,EAAI,WAAJ,EAAiB,EAAjB,EAAqB,EAArB,EAAyB,EAAzB,EAA6B,EAA7B,EAAiC,EAAjC,CAA9B,CAHU,EAIV,CAAC,CAAD,EAAI;AAAED,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,KAAK,EAAE;AAAnB,GAAJ,EAA4B,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,CAA5B,CAJU,EAKV,CAAC,CAAD,EAAI;AAAED,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,KAAK,EAAE;AAAnB,GAAJ,EAA4B,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,CAA5B,CALU,EAMV,CAAC,CAAD,EAAI;AAAED,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,KAAK,EAAE;AAAnB,GAAJ,EAA4B,CAAC,CAAD,EAAI,CAAJ,EAAO,CAAP,EAAU,CAAV,EAAa,CAAb,CAA5B,CANU,CAAd,EAOG,uBAPH,EAO4B,CAACC,OAAD,EAAUC,MAAV,EAAkBC,QAAlB,KAA+B;AACvDC,IAAAA,IAAI,CAAE,KAAIH,OAAQ,MAAKE,QAAS,GAA5B,EAAgC,MAAM;AACtC,YAAME,MAAM,GAAG,oCAAeJ,OAAf,EAAwBC,MAAxB,CAAf;AACAI,MAAAA,MAAM,CAACD,MAAD,CAAN,CAAeE,OAAf,CAAuBJ,QAAvB;AACH,KAHG,CAAJ;AAIH,GAZD;AAaH,CAdO,CAAR","sourcesContent":["import { makePagination } from \"./makePagination\"\n\ndescribe(\"makePagination\", () => {\n    describe.each([\n        [0, { total: 20, width: 7 }, [0, 1, 2, 3, 4, \"next-more\", 19]],\n        [10, { total: 20, width: 7 }, [0, \"prev-more\", 9, 10, 11, \"next-more\", 19]],\n        [20, { total: 20, width: 7 }, [0, \"prev-more\", 15, 16, 17, 18, 19]],\n        [0, { total: 5, width: 7 }, [0, 1, 2, 3, 4]],\n        [2, { total: 5, width: 7 }, [0, 1, 2, 3, 4]],\n        [4, { total: 5, width: 7 }, [0, 1, 2, 3, 4]]\n    ])(\"current:%o, option:%o\", (current, option, expected) => {\n        test(`f(${current})=[${expected}]`, () => {\n            const result = makePagination(current, option)\n            expect(result).toEqual(expected)\n        })\n    })\n})\n"],"file":"makePagination.test.js"}