diff --git a/babel.config.js b/babel.config.js index f54d708..a3ed3a8 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,13 +1,20 @@ -module.exports = { - presets: [ - [ - "@babel/preset-env", - { - targets: { - node: "current" - } - } - ] - ], - plugins: ["transform-es2015-modules-commonjs"] -}; \ No newline at end of file +module.exports = (api) => { + const isTest = api.env('test'); + if (isTest) { + // special babel config for jest + return { + presets: [ + [ + "@babel/preset-env", + { + targets: { + node: "current" + } + } + ] + ], + plugins: ["transform-es2015-modules-commonjs"] + }; + } + return {}; +}; diff --git a/package.json b/package.json index e023bb2..603a74e 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "@charlietango/use-focus-trap": "^1.2.6", "@popperjs/core": "^2.5.4", "classnames": "^2.2.6", - "luxon": "^1.22.0", "react-popper": "^2.2.3" }, "devDependencies": { @@ -52,7 +51,6 @@ "@types/enzyme-adapter-react-16": "^1.0.6", "@types/jest": "^26.0.4", "@types/lodash-es": "^4.17.3", - "@types/luxon": "^1.21.0", "@types/react": "^16.9.55", "@types/react-dom": "^16.9.9", "@types/react-test-renderer": "^16.9.2", @@ -64,6 +62,7 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", "classnames": "^2.2.6", "css-loader": "^3.6.0", + "date-fns": "^2.16.1", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "eslint": "^6.8.0", diff --git a/rollup.config.js b/rollup.config.js index 014f988..eae51e3 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -28,7 +28,6 @@ const config = [{ external: [ "react", "react-dom", "@popperjs/core", "react-popper", - "luxon", "@charlietango/use-focus-trap", ], plugins: [ diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index 6646a33..350330d 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -1,6 +1,6 @@ import React, { useMemo } from 'react'; import { UUI } from '../../core/uui'; -import { DateTime } from 'luxon'; +import { format, isValid } from 'date-fns'; export interface DatePickerFeatureProps { /** @@ -28,7 +28,7 @@ export const DatePicker = UUI.FunctionComponent({ const dateValue = useMemo(() => { if (!props.value) return '' - return DateTime.fromJSDate(props.value).toFormat('yyyy-LL-dd') + return format(props.value, 'yyyy-LL-dd') }, [props.value]) return ( @@ -39,7 +39,11 @@ export const DatePicker = UUI.FunctionComponent({ name={props.name} value={props.value === undefined ? undefined : dateValue} onChange={props.onChange === undefined ? undefined : ( - (event) => { props.onChange && props.onChange(new Date(event.target.value), event) } + (event) => { + const newValue = new Date(event.target.value) + if (!isValid(newValue)) return + props.onChange && props.onChange(newValue, event) + } )} > diff --git a/src/components/Label/CountdownLabel.tsx b/src/components/Label/CountdownLabel.tsx index 1d02134..d22f601 100644 --- a/src/components/Label/CountdownLabel.tsx +++ b/src/components/Label/CountdownLabel.tsx @@ -1,7 +1,8 @@ import React, { useState, useCallback } from 'react'; import { UUI } from '../../core/uui'; import { useInterval } from 'react-use'; -import { DateTime, Duration } from 'luxon'; +import { format, differenceInMilliseconds } from 'date-fns'; +import { addHours, addMilliseconds } from 'date-fns/esm'; export interface CountdownLabelFeatureProps { /** @@ -41,9 +42,11 @@ export const CountdownLabel = UUI.FunctionComponent({ } const generateLabelText = useCallback(() => { - const diff = DateTime.fromJSDate(props.until).diffNow() - const duration = (!props.allowNegative && diff.milliseconds < 0) ? Duration.fromMillis(0) : diff - return duration.toFormat(finalProps.format) + const diff = differenceInMilliseconds(props.until, new Date()) + const duration = (!props.allowNegative && diff && diff < 0) + ? new Date(0) + : addMilliseconds(addHours(new Date(0), 16), diff) + return format(duration, finalProps.format) }, [finalProps.format, props.allowNegative, props.until]) const [text, setText] = useState(generateLabelText()) diff --git a/src/utils/dateFormatter.ts b/src/utils/dateFormatter.ts index 691aae0..1e97bc6 100644 --- a/src/utils/dateFormatter.ts +++ b/src/utils/dateFormatter.ts @@ -1,4 +1,4 @@ -import { DateTime } from "luxon" +import { format } from 'date-fns' export type DateFormatterLocale = | 'zh-CN' | 'zh-TW' @@ -6,7 +6,7 @@ export type DateFormatterLocale = -const formatHelper = (format: string) => (d: Date) => DateTime.fromJSDate(d).toFormat(format) +const formatHelper = (f: string) => (d: Date) => format(d, f) const chineseWeekHelper1 = (weekday: number) => { switch(weekday) { case 1: return "星期一" diff --git a/src/utils/timeFormatter.ts b/src/utils/timeFormatter.ts index 664d814..925819a 100644 --- a/src/utils/timeFormatter.ts +++ b/src/utils/timeFormatter.ts @@ -1,10 +1,10 @@ -import { DateTime } from "luxon" +import { format } from 'date-fns' export type TimeFormatterLocale = | 'zh-CN' | 'zh-TW' | 'en-US' -const formatHelper = (format: string) => (d: Date) => DateTime.fromJSDate(d).toFormat(format) +const formatHelper = (f: string) => (d: Date) => format(d, f) const chineseCapitalNumber = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'] const chineseCapitalHourSecondHelper = (value: number) => { diff --git a/stories/Label.stories.mdx b/stories/Label.stories.mdx index 5a6abf1..77c7f34 100644 --- a/stories/Label.stories.mdx +++ b/stories/Label.stories.mdx @@ -1,7 +1,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; import { MoneyLabel, DateLabel, TimeLabel, CountdownLabel, NumberAbbrLabel } from '../src'; import { useState } from 'react'; -import { DateTime } from 'luxon'; +import { addHours } from 'date-fns' @@ -115,7 +115,7 @@ import { DateTime } from 'luxon'; {() => { - const until = DateTime.local().plus({ hours: 12 }).toJSDate() + const until = addHours(new Date(), 12) return (
diff --git a/yarn.lock b/yarn.lock index e84f958..5eb7bc1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3022,11 +3022,6 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.164.tgz#52348bcf909ac7b4c1bcbeda5c23135176e5dfa0" integrity sha512-fXCEmONnrtbYUc5014avwBeMdhHHO8YJCkOBflUL9EoJBSKZ1dei+VO74fA7JkTHZ1GvZack2TyIw5U+1lT8jg== -"@types/luxon@^1.21.0": - version "1.22.0" - resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.22.0.tgz#dbdf2cc7ba3dfce98c57a3f0e003791122cba009" - integrity sha512-riAvdx85rU7OXCrjW3f7dIf7fuJDrxck2Dkjd0weh6ul7q+wumrwe6+/tD8v7yOKnZAuEnTFF4FU7b+5W/I3bw== - "@types/markdown-to-jsx@^6.11.0": version "6.11.3" resolved "https://registry.yarnpkg.com/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz#cdd1619308fecbc8be7e6a26f3751260249b020e" @@ -6253,6 +6248,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +date-fns@^2.16.1: + version "2.16.1" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b" + integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ== + date-time@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/date-time/-/date-time-2.1.0.tgz#0286d1b4c769633b3ca13e1e62558d2dbdc2eba2" @@ -11039,11 +11039,6 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" -luxon@^1.22.0: - version "1.25.0" - resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.25.0.tgz#d86219e90bc0102c0eb299d65b2f5e95efe1fe72" - integrity sha512-hEgLurSH8kQRjY6i4YLey+mcKVAWXbDNlZRmM6AgWDJ1cY3atl8Ztf5wEY7VBReFbmGnwQPz7KYJblL8B2k0jQ== - macos-release@^2.2.0: version "2.3.0" resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"