修复当 value 为 undefined 时抛异常的问题

Author: zengande

package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "dy-cron-js",
-    "version": "1.0.7",
+    "version": "1.0.10",
     "scripts": {
         "start": "dumi dev",
         "docs:build": "dumi build",
@@ -37,7 +37,6 @@
         ]
     },
     "dependencies": {
-        "@types/classnames": "^2.2.11",
         "@types/numeral": "^2.0.0",
         "antd": "^4.5.0",
         "numeral": "^2.0.6"
@@ -54,4 +53,4 @@
         "prettier": "^1.19.1",
         "yorkie": "^2.0.0"
     }
-}
+}

src/Cron/index.less

@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import { Cron } from 'dy-cron-js';
 
 export default () => {
-  const [cron, setCron] = useState('00 12 11-23/01 * * ?');
+  const [cron, setCron] = useState(undefined);
   return (
     <Cron
       value={cron}

src/Cron/index.md

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './index.less';
 import { Radio, RadioChangeEvent, Input } from 'antd';
 import HourInput from '@/CycleInput/HourInput';
 import DayInput from '@/CycleInput/DayInput';
@@ -28,6 +27,10 @@ const cycles = [
 // }
 
 export interface CronProps {
+  /**
+   * class
+   */
+  className?: string;
   /**
    * 是否显示输入框
    */
@@ -51,10 +54,12 @@ export default class Cron extends React.PureComponent<CronProps, CronState> {
   constructor(props: CronProps) {
     super(props);
 
-    const cronParserResult = util.cronParser(props.value);
+    var cron = props.value || util.generateRandomCron(cycles[0].value);
+
+    const cronParserResult = util.cronParser(cron);
     this.state = {
       cycle: cronParserResult?.cycle || cycles[0].value,
-      cron: props.value,
+      cron: cron,
     };
   }
 
@@ -123,14 +128,14 @@ export default class Cron extends React.PureComponent<CronProps, CronState> {
 
   render() {
     let { cycle, cron } = this.state;
-    const { displayInput } = this.props;
+    const { displayInput, className } = this.props;
     return (
-      <div className={styles.container}>
+      <div className={className}>
         {displayInput && (
           <Input value={cron} style={{ marginBottom: '10px' }} />
         )}
         <Radio.Group
-          className={styles.cycles}
+          style={{ marginBottom: '8px' }}
           value={cycle}
           onChange={this.onCycleChanged.bind(this)}
         >

src/Cron/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styles from './index.less';
 
 export interface FormLabelProps {
   label?: string;
@@ -13,16 +12,30 @@ export default class FormLabel extends React.PureComponent<FormLabelProps> {
 
     return (
       <div
-        style={{ display: inline ? 'inline-block' : 'block' }}
-        className={styles.container}
+        style={{
+          marginBottom: '8px',
+          display: inline ? 'inline-block' : 'block',
+        }}
       >
         {label && (
-          <span className={styles.label}>
+          <span style={{ fontSize: '14px', color: 'rgba(0, 0, 0, 0.85)' }}>
             {label.endsWith(':') ? label : label + ':'}
           </span>
         )}
-        <div className={styles.content}>{children}</div>
-        {suffix && <span className={styles.suffix}>{suffix}</span>}
+        <div
+          style={{
+            display: 'inline-block',
+            margin: '0px 8px',
+            minWidth: '84px',
+          }}
+        >
+          {children}
+        </div>
+        {suffix && (
+          <span style={{ fontSize: '14px', color: 'rgba(0, 0, 0, 0.85)' }}>
+            {suffix}
+          </span>
+        )}
       </div>
     );
   }

src/FormLabel/index.less

@@ -1,6 +1,5 @@
 import { Select } from 'antd';
 import React from 'react';
-import numeral from 'numeral';
 import NumberSelect from './NumberSelect';
 
 export default (props: {

src/FormLabel/index.tsx

@@ -81,7 +81,12 @@ export default {
     const { cycle } = value;
     if (cycle === 'H') {
       const { intervalHours, startHours, startMinutes, endHours } = value;
-      if (intervalHours && startHours && startMinutes && endHours) {
+      if (
+        intervalHours != undefined &&
+        startHours != undefined &&
+        startMinutes != undefined &&
+        endHours != undefined
+      ) {
         return `00 ${numeral(startMinutes).format('00')} ${numeral(
           startHours,
         ).format('00')}-${numeral(endHours).format('00')}/${numeral(
@@ -92,30 +97,31 @@ export default {
       }
     } else {
       const { hours, minutes } = value;
-      if (!hours || !minutes) {
-        throw new Error('错误的参数');
-      }
-      if (cycle === 'D') {
-        return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
-          '00',
-        )} * * ?`;
-      } else if (cycle === 'W') {
-        const { dayOfWeek } = value;
-        return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
-          '00',
-        )} ? * ${dayOfWeek}`;
-      } else if (cycle === 'M') {
-        const { dayOfMonth } = value;
-        return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
-          '00',
-        )} ${dayOfMonth} * ?`;
-      } else if (cycle === 'Q') {
-        const { dayOfMonth, quarters } = value;
-        return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
-          '00',
-        )} ${dayOfMonth} ${quarters} ?`;
+      if (hours != undefined && minutes != undefined) {
+        if (cycle === 'D') {
+          return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
+            '00',
+          )} * * ?`;
+        } else if (cycle === 'W') {
+          const { dayOfWeek } = value;
+          return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
+            '00',
+          )} ? * ${dayOfWeek}`;
+        } else if (cycle === 'M') {
+          const { dayOfMonth } = value;
+          return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
+            '00',
+          )} ${dayOfMonth} * ?`;
+        } else if (cycle === 'Q') {
+          const { dayOfMonth, quarters } = value;
+          return `00 ${numeral(minutes).format('00')} ${numeral(hours).format(
+            '00',
+          )} ${dayOfMonth} ${quarters} ?`;
+        } else {
+          throw new Error('无效的周期');
+        }
       } else {
-        throw new Error('无效的周期');
+        throw new Error('错误的参数');
       }
     }
   },