vap1 0.2.2 → 0.2.3

package/components/_adapt/Menu.js

@@ -33,17 +33,17 @@ const renderGroup = (props) => {
             return renderGroup(item);
         }
         const itemProps = getMenuProps(item);
-        return react_1.default.createElement(antd_1.Menu.Item, Object.assign({ key: item.key }, itemProps), itemProps.title);
+        return react_1.default.createElement(antd_1.Menu.Item, Object.assign({ key: item.key }, lodash_1.default.omit(itemProps, ['title'])), itemProps.title);
     }));
 };
 const _Menu = props => {
     if (lodash_1.default.isArray(props.items) && props.items.length) {
-        return react_1.default.createElement(antd_1.Menu, Object.assign({}, lodash_1.default.omit(props, 'children')), props.items.map(item => {
+        return react_1.default.createElement(antd_1.Menu, Object.assign({}, lodash_1.default.omit(props, ['children', 'items'])), props.items.map(item => {
             if (lodash_1.default.isArray(item.children)) {
                 return renderGroup(item);
             }
             const itemProps = getMenuProps(item);
-            return react_1.default.createElement(antd_1.Menu.Item, Object.assign({ key: item.key }, itemProps), itemProps.title);
+            return react_1.default.createElement(antd_1.Menu.Item, Object.assign({ key: item.key }, lodash_1.default.omit(itemProps, ['title'])), itemProps.title);
         }));
     }
     return react_1.default.createElement(antd_1.Menu, Object.assign({}, props));

package/components/_common/DateRange.d.ts

@@ -20,11 +20,11 @@ export type DateRangeProps = {
     /**
      * 默认开始时间
     */
-    defaultStart?: string | Dayjs;
+    start?: string | Dayjs;
     /**
      * 默认结束时间
     */
-    defaultEnd?: string | Dayjs;
+    end?: string | Dayjs;
     /**
      * 响应事件，自取参数
      * 第一个参数为 string 类型
@@ -45,6 +45,14 @@ export type DateRangeProps = {
      * 宽度
     */
     width?: number;
+    /**
+     * 开始时间提示
+    */
+    startPlaceholder?: string;
+    /**
+     * 结束时间提示
+    */
+    endPlaceholder?: string;
 };
 /**
  * 日期区间选择

package/components/_common/DateRange.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRange = void 0;
 const react_1 = __importStar(require("react"));
-const lodash_1 = __importDefault(require("lodash"));
 const dayjs_1 = __importDefault(require("dayjs"));
 const antd_1 = require("antd");
 const hooks_1 = require("../../hooks");
@@ -38,71 +37,52 @@ const Const_1 = require("../_setup/Const");
  * 日期区间选择
 */
 const DateRange = (props) => {
-    const update = (0, hooks_1.useUpdate)();
-    const state = (0, react_1.useRef)({ startOpen: false, endOpen: false });
-    const FORMAT = props.showTime === false ? utils_1.GLOBAL.CONFIG.DATE.DATE_FORMAT : utils_1.GLOBAL.CONFIG.DATE.DATE_TIME_FORMAT;
-    (0, react_1.useLayoutEffect)(() => {
-        if (lodash_1.default.has(props, 'defaultStart'))
-            state.current.start = (0, dayjs_1.default)(props.defaultStart);
-        if (lodash_1.default.has(props, 'defaultEnd'))
-            state.current.end = (0, dayjs_1.default)(props.defaultEnd);
-        if (state.current.start || state.current.end)
-            update();
-    }, []);
-    const disabledStartDate = (startValue) => {
-        const endValue = state.current.end;
-        if (!startValue || !endValue) {
-            if (props.minDate) {
-                return startValue.valueOf() > props.minDate.valueOf();
-            }
-            return false;
+    const [start, setStart] = (0, react_1.useState)(props.start ? (0, dayjs_1.default)(props.start) : undefined);
+    const [end, setEnd] = (0, react_1.useState)(props.end ? (0, dayjs_1.default)(props.end) : undefined);
+    const isFirstMounted = (0, hooks_1.useFirstMountState)();
+    // 时间格式，提示
+    const [FORMAT, startPlaceholder, endPlaceholder] = (0, react_1.useMemo)(() => {
+        const FORMAT = props.showTime === false ? utils_1.GLOBAL.CONFIG.DATE.DATE_FORMAT : utils_1.GLOBAL.CONFIG.DATE.DATE_TIME_FORMAT;
+        const startPlaceholder = props.startPlaceholder ? props.startPlaceholder : (props.showTime ? utils_1.i18n.getText(Const_1.V.DATETIME_START) : utils_1.i18n.getText(Const_1.V.DATE_START));
+        const endPlaceholder = props.endPlaceholder ? props.endPlaceholder : (props.showTime ? utils_1.i18n.getText(Const_1.V.DATETIME_END) : utils_1.i18n.getText(Const_1.V.DATE_END));
+        return [FORMAT, startPlaceholder, endPlaceholder];
+    }, [props.showTime, props.startPlaceholder, props.endPlaceholder]);
+    // 是否在范围内
+    const inRange = (0, react_1.useCallback)((value) => {
+        if (props.minDate) {
+            if (value.isBefore(props.minDate))
+                return false;
         }
-        return startValue.valueOf() > endValue.valueOf();
-    };
-    const disabledEndDate = (endValue) => {
-        const startValue = state.current.start;
-        if (!endValue || !startValue) {
-            if (props.maxDate) {
-                return endValue.valueOf() < props.maxDate.valueOf();
-            }
-            return false;
+        if (props.maxDate) {
+            if (value.isAfter(props.maxDate))
+                return false;
         }
-        return endValue.valueOf() <= startValue.valueOf();
-    };
-    const callback = () => {
-        props.onChange([
-            state.current.start ? state.current.start.format(FORMAT) : null,
-            state.current.end ? state.current.end.format(FORMAT) : null,
-        ], [
-            state.current.start ? state.current.start : null,
-            state.current.end ? state.current.end : null,
-        ]);
-    };
-    const onStartChange = (value) => {
-        state.current.start = value;
-        callback();
-        update();
-    };
-    const onEndChange = (value) => {
-        state.current.end = value;
-        callback();
-        update();
-    };
-    const handleStartOpenChange = (open) => {
-        state.current.startOpen = open;
-        state.current.endOpen = !open;
-        update();
-    };
-    const handleEndOpenChange = (open) => {
-        state.current.startOpen = false;
-        state.current.endOpen = open;
-        update();
-    };
+        return true;
+    }, [props.minDate, props.maxDate]);
+    const disabledStartDate = (0, react_1.useCallback)((value) => {
+        if (!inRange(value))
+            return true;
+        if (end != null && value.isAfter(end))
+            return true;
+        return false;
+    }, [end, inRange]);
+    const disabledEndDate = (0, react_1.useCallback)((value) => {
+        if (!inRange(value))
+            return true;
+        if (start != null && value.isBefore(start))
+            return true;
+        return false;
+    }, [start, inRange]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (isFirstMounted)
+            return;
+        props.onChange([start ? start.format(FORMAT) : null, end ? end.format(FORMAT) : null,], [start ? start : null, end ? end : null,]);
+    }, [start, end]);
     let style = {};
     if (props.width)
         style.width = props.width;
     return react_1.default.createElement("div", { className: utils_1.StringUtil.className(['c-daterange'], props.className), style: style },
-        react_1.default.createElement(antd_1.DatePicker, { value: state.current.start, allowClear: props.allowClear, disabled: props.disabled, disabledDate: val => disabledStartDate(val), showTime: props.showTime, format: FORMAT, placeholder: props.showTime ? utils_1.i18n.getText(Const_1.V.DATETIME_START) : utils_1.i18n.getText(Const_1.V.DATE_START), onChange: onStartChange, onOpenChange: open => handleStartOpenChange(open), open: state.current.startOpen }),
-        react_1.default.createElement(antd_1.DatePicker, { value: state.current.end, allowClear: props.allowClear, disabled: props.disabled, disabledDate: val => disabledEndDate(val), showTime: props.showTime, format: FORMAT, placeholder: props.showTime ? utils_1.i18n.getText(Const_1.V.DATETIME_END) : utils_1.i18n.getText(Const_1.V.DATE_END), onChange: (val) => onEndChange(val), open: state.current.endOpen, onOpenChange: handleEndOpenChange }));
+        react_1.default.createElement(antd_1.DatePicker, { value: start, allowClear: props.allowClear, disabled: props.disabled, disabledDate: disabledStartDate, showTime: props.showTime, format: FORMAT, placeholder: startPlaceholder, onChange: setStart }),
+        react_1.default.createElement(antd_1.DatePicker, { value: end, allowClear: props.allowClear, disabled: props.disabled, disabledDate: disabledEndDate, showTime: props.showTime, format: FORMAT, placeholder: endPlaceholder, onChange: setEnd }));
 };
 exports.DateRange = DateRange;

package/components/_setup/SearchField/SearchFieldDate.js

@@ -87,9 +87,9 @@ const Range = (props) => {
         })
     };
     if (data[startField])
-        params.defaultStart = data[startField];
+        params.start = data[startField];
     if (data[endField])
-        params.defaultEnd = data[endField];
+        params.end = data[endField];
     return react_1.default.createElement(DateRange_1.DateRange, Object.assign({}, params));
 };
 const AntdRnage = (props) => {

package/components/_setup/UForm/UFormDate.js

@@ -376,12 +376,12 @@ const DateRangePick = (props) => {
         if (value[startField]) {
             let day = (0, dayjs_1.default)(value[startField]);
             if (day.isValid())
-                params.defaultStart = day;
+                params.start = day;
         }
         if (value[endField]) {
             let day = (0, dayjs_1.default)(value[endField]);
             if (day.isValid())
-                params.defaultEnd = day;
+                params.end = day;
         }
     }
     return react_1.default.createElement(DateRange_1.DateRange, Object.assign({}, field.config, params));

package/components/_setup/UForm/UFormInput.js

@@ -78,14 +78,18 @@ const _utils_1 = require("./_utils");
             config.valueFormat(value),
             " "));
 });
+const formatRange = (value) => {
+    if (value == undefined)
+        return utils_1.Const.NONE;
+    let start = value[0] === undefined ? '?' : value[0];
+    let end = value[1] === undefined ? '?' : value[1];
+    return `${start} - ${end}`;
+};
 (0, _register_1.registerFormField)('slider-range', (props) => {
     const { field, disabled, value, onChange } = props;
-    let config = lodash_1.default.merge({ valueWidth: 128, valueFormat: (range) => range ? `${range[0]} - ${range[1]}` : '0' }, field.config);
+    let config = lodash_1.default.merge({ valueWidth: 128, valueFormat: formatRange }, field.config);
     let params = { range: true, disabled, min: 0, max: 100, step: 1 };
     const [fields, values] = (0, _input_1.getMultiFieldValues)(field, value);
-    if (!lodash_1.default.isFunction(config.valueFormat) || config.valueWidth == 0) {
-        return react_1.default.createElement(Slider_1.Slider, Object.assign({}, params, field.config, { range: true, value: values, onChange: ([start, end]) => onChange({ [fields[0]]: start, [fields[1]]: end }) }));
-    }
     return react_1.default.createElement("div", { className: 'i-slider' },
         react_1.default.createElement(Slider_1.Slider, Object.assign({}, params, field.config, { range: true, value: values, onChange: ([start, end]) => onChange({ [fields[0]]: start, [fields[1]]: end }) })),
         react_1.default.createElement("div", { className: 'i-slider-value', style: { width: config.valueWidth } },

package/components/_setup/UForm/UFormSelect.js

@@ -47,22 +47,25 @@ const Const_1 = require("../Const");
         params.allowClear = false;
     return react_1.default.createElement(Select_1.Select, Object.assign({}, params, field.config, { mode: "default", value: value === null ? undefined : value, onChange: onChange, options: options }));
 });
-// 下拉
+// 多选下拉
 (0, _register_1.registerFormField)('multi-select', (props) => {
     const { field, disabled, value, onChange, options } = props;
+    const onValueChange = (0, react_1.useCallback)((val) => {
+        if (field.dataType == 'array') {
+            onChange(val);
+            return;
+        }
+        onChange(val.join(','));
+    }, [field.dataType]);
     let params = { placeholder: (0, _input_1.getPlaceholder)(field, true), disabled, allowClear: true };
     if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
         params.allowClear = false;
-    let selectKey = [];
-    if (value) {
-        if (lodash_1.default.isArray(value)) {
-            selectKey = value;
-        }
-        else {
-            selectKey = (value || '').split(',').map(lodash_1.default.trim);
-        }
-    }
-    return react_1.default.createElement(Select_1.Select, Object.assign({}, params, field.config, { value: selectKey, mode: "multiple", onChange: (val) => onChange(val.join(',')) }), options.map(item => react_1.default.createElement(Select_1.Select.Option, { value: item.value + '' }, item.label)));
+    const selectKey = (0, react_1.useMemo)(() => {
+        if (lodash_1.default.isArray(value))
+            return value;
+        return (value || '').split(',').map(lodash_1.default.trim);
+    }, [value]);
+    return react_1.default.createElement(Select_1.Select, Object.assign({}, params, field.config, { value: selectKey, mode: "multiple", onChange: onValueChange }), options.map(item => react_1.default.createElement(Select_1.Select.Option, { value: item.value + '' }, item.label)));
 }, {
     render: _utils_1.MULTI_CHOOSE_SHOW
 });

package/deps/echarts.js

@@ -40,7 +40,7 @@ const EChart = props => {
         window.clearTimeout(resizePid.current);
         resizePid.current = setTimeout(() => {
             graphRef.current.resize();
-        }, 66);
+        }, 33);
     };
     (0, react_1.useEffect)(() => {
         graphRef.current = echarts.init(rootRef.current);
@@ -64,6 +64,12 @@ const EChart = props => {
     (0, react_1.useEffect)(() => {
         if (graphRef.current == null)
             return;
+        if (props.data == null)
+            return;
+        if (graphRef.current.setOption == null) {
+            console.error('尚未引入 ECharts,需要在package.json里面声明');
+            return;
+        }
         graphRef.current.setOption(props.data);
     }, [props.data]);
     return react_1.default.createElement("div", { ref: rootRef, className: utils_1.StringUtil.className(['_ev'], props.className) });

package/package.json

@@ -1 +1 @@
-{"name":"vap1","version":"0.2.2","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
+{"name":"vap1","version":"0.2.3","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}