vap1 0.1.0 → 0.1.1

package/components/Box/Box.js

@@ -67,7 +67,8 @@ exports.useBox = useBox;
 exports.Box = react_1.default.forwardRef((props, ref) => {
     const app = (0, hooks_1.useApp)();
     const [state, setState] = (0, hooks_1.useSetState)(null);
-    const _layoutRef = (0, react_1.useRef)(null);
+    const _layoutRef = (0, react_1.useRef)(null); // 向下兼容
+    const domId = (0, react_1.useMemo)(() => utils_1.StringUtil.genKey(), []); // 向下兼容
     const rootRef = (0, react_1.useRef)(null);
     const contextRef = (0, react_1.useRef)(null);
     const selectRef = (0, react_1.useRef)(null);
@@ -134,9 +135,15 @@ exports.Box = react_1.default.forwardRef((props, ref) => {
     // if (props.pagination && props.mode == 'inner') {
     //     paginationProps.hideOnSinglePage = true;
     // }
-    return react_1.default.createElement(Layout_1.Layout, { className: utils_1.StringUtil.className(className, props.className), style: style, ref: _layoutRef },
+    return react_1.default.createElement(Layout_1.Layout, { id: domId, className: utils_1.StringUtil.className(className, props.className), style: style, ref: _layoutRef },
         props.selectBar && (0, _register_1.getSelectBar)(props.selectBar.type) != null && react_1.default.createElement(SelectBar_1.SelectBar, Object.assign({}, props.selectBar, { ref: selectRef, onSelect: (...args) => setState({ selected: args }) })),
         react_1.default.createElement(Layout_1.Layout.Content, { style: { overflow: props.overflowAuto ? 'auto' : 'hidden' }, ref: () => {
+                if (_layoutRef.current == null) {
+                    let layout = document.getElementById(domId);
+                    if (layout) {
+                        _layoutRef.current = layout;
+                    }
+                }
                 if (_layoutRef.current != null) {
                     let el = lodash_1.default.find(_layoutRef.current.children, (item) => lodash_1.default.toLower(item.tagName) == 'main');
                     if (el != null)

package/components/Tables/ApiTable.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { BaseTableProps } from './index';
 import type { ApiModel } from '../../hooks/_list';
-import type { ApiOption } from '../../hooks/useApi';
+import type { ApiOption } from '../../hooks/useApiBase';
 export type ApiTableProps = BaseTableProps & Pick<ApiOption, 'api' | 'aop' | 'tipDisabled' | 'tipField'>;
 export declare const ApiTable: React.ForwardRefExoticComponent<import("./index").TableDefine & {
     mode?: import("../Box/Box").BoxMode;
@@ -15,4 +15,4 @@ export declare const ApiTable: React.ForwardRefExoticComponent<import("./index")
     searchBar?: Omit<import("../SearchBar").SearchBarProps, "onChange" | "onSearch">;
     default?: import("../..").PlainObject;
     autoLoad?: false;
-} & Pick<ApiOption, "api" | "aop" | "tipDisabled" | "tipField"> & React.RefAttributes<ApiModel>>;
+} & Pick<ApiOption, "api" | "tipField" | "tipDisabled" | "aop"> & React.RefAttributes<ApiModel>>;

package/components/Tables/ApiTableModal.d.ts

@@ -15,7 +15,7 @@ export declare const ApiTableModal: React.ForwardRefExoticComponent<import(".").
     searchBar?: Omit<import("../SearchBar").SearchBarProps, "onChange" | "onSearch">;
     default?: import("../..").PlainObject;
     autoLoad?: false;
-} & Pick<import("../../hooks/useApi").ApiOption, "api" | "aop" | "tipDisabled" | "tipField"> & Omit<import("antd/es/modal").ModalProps, "visible" | "onCancel" | "onOk"> & {
+} & Pick<import("../../hooks/useApiBase").ApiOption, "api" | "tipField" | "tipDisabled" | "aop"> & Omit<import("antd/es/modal").ModalProps, "visible" | "onCancel" | "onOk"> & {
     open?: boolean;
     onOk?: (data?: import("../..").PlainObject) => void;
     onCancel?: () => void;

package/components/Tables/TopTable.js

@@ -137,21 +137,20 @@ const TopTable = props => {
             }
         });
     }
-    return react_1.default.createElement(Table_1.Table, Object.assign({}, tableProps, props, { 
-        // ref={tableRef}
-        rowClassName: (record, i) => {
-            let clazz = [];
-            if (i <= 3)
-                clazz.push('c-table-top-' + i);
-            if (lodash_1.default.isFunction(props.onRowSelect)) {
-                if (selected && selected[rowKey] == record[rowKey]) {
-                    clazz.push('ant-table-row-selected');
+    return react_1.default.createElement("div", { ref: tableRef, className: 'c-table-top-container' },
+        react_1.default.createElement(Table_1.Table, Object.assign({}, tableProps, props, { rowClassName: (record, i) => {
+                let clazz = [];
+                if (i <= 3)
+                    clazz.push('c-table-top-' + i);
+                if (lodash_1.default.isFunction(props.onRowSelect)) {
+                    if (selected && selected[rowKey] == record[rowKey]) {
+                        clazz.push('ant-table-row-selected');
+                    }
+                    else {
+                        clazz.push('c-table-top-cursor');
+                    }
                 }
-                else {
-                    clazz.push('c-table-top-cursor');
-                }
-            }
-            return clazz.join(' ');
-        }, scroll: scroll, className: utils_1.StringUtil.className(['c-table', 'c-table-top'], props.className), columns: columns, dataSource: list, loading: isQuerying }));
+                return clazz.join(' ');
+            }, scroll: scroll, className: utils_1.StringUtil.className(['c-table', 'c-table-top'], props.className), columns: columns, dataSource: list, loading: isQuerying })));
 };
 exports.TopTable = TopTable;

package/components/Tables/VTable.js

@@ -51,7 +51,7 @@ const _VTable = react_1.default.forwardRef((props, ref) => {
     const update = (0, hooks_1.useUpdate)();
     const { state, root, resize } = (0, Box_1.useBox)();
     const [scroll, setScroll] = (0, react_1.useState)(undefined);
-    const { rowKey, list, isQuerying, pageNo, pageSize, orderBy, query } = props.model;
+    const { rowKey, list, isQuerying, pageNo, pageSize, orderBy, query, total } = props.model;
     let start = (0, react_1.useRef)(0);
     const tableProps = {};
     (0, react_1.useEffect)(() => {
@@ -122,6 +122,10 @@ const _VTable = react_1.default.forwardRef((props, ref) => {
     (0, react_1.useEffect)(() => {
         if (props.autoLoad === false)
             return;
+        console.log(props.model);
+        // @ts-ignore
+        if (props.model.mode == 'api-global' && total > 0)
+            return;
         // @ts-ignore
         if (lodash_1.default.has(props.selectBar, 'config.mustSelect') && props.selectBar.config['mustSelect'])
             return;
@@ -179,9 +183,7 @@ const _VTable = react_1.default.forwardRef((props, ref) => {
             },
         };
     }
-    return react_1.default.createElement(Table_1.Table, Object.assign({ rowKey: record => record[props.rowKey || rowKey], 
-        // scroll={scroll}
-        // tableLayout="fixed"
+    return react_1.default.createElement(Table_1.Table, Object.assign({ rowKey: props.rowKey || rowKey, scroll: scroll, tableLayout: "fixed", 
         // showSorterTooltip={false}
         size: utils_1.GLOBAL.CONFIG.TABLE.SIZE }, props, tableProps, { className: utils_1.StringUtil.className(['c-table'], props.className), pagination: false, columns: columns, locale: { emptyText: react_1.default.createElement(antd_1.Empty, { style: { marginTop: 24 } }) }, dataSource: list, loading: isQuerying, onChange: (x, y, field) => {
             if (field.column) {

package/components/Trees/ActionTree.js

@@ -647,7 +647,7 @@ const renderNode = (props, node, position, state, search, context, parentLen) =>
 };
 const renderNodes = (props, state, data, position, search, context) => data.map((item, idx) => renderNode(props, item, [...position, idx], state, search, context, data.length));
 const renderRoot = (props, state, context) => {
-    const { search, treeData, folderChecker } = state;
+    const { search, treeData } = state;
     if (search.keyword) {
         if (search.match.size == 0)
             return react_1.default.createElement(antd_1.Tree.TreeNode, { isLeaf: true, title: react_1.default.createElement(antd_1.Empty, { description: txt(Const_1.V.TXT_FIND_NULL, search.word) }), selectable: false, className: "c-tree-empty" });

package/components/Trees/BaseTree.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Language } from '../../utils/_Support';
 import type { BaseTreeOpts, SearchResult, TreeNodeData } from '../../utils/TreeUtil';
-import type { AntTreeNodeProps, TreeProps } from 'antd/es/tree';
+import type { AntTreeNodeProps, AntTreeNodeSelectedEvent, TreeProps } from 'antd/es/tree';
 import type { PropsWithChildren, ReactNode } from 'react';
 import type { BaseTreeProps } from './index';
 import type { Key, PlainObject } from '../../basetype';
@@ -19,11 +19,7 @@ export type BaseTreeState = Required<BaseTreeOpts> & {
         field: string;
     }[];
 };
-type OnSelectFunction = (selectedKeys: Key[], info: {
-    selected?: boolean;
-    selectedNodes: any[];
-    nativeEvent?: MouseEvent;
-}, tree?: PlainObject[]) => void;
+type OnSelectFunction = (selectedKeys: Key[], info: AntTreeNodeSelectedEvent, tree?: PlainObject[]) => void;
 type BaseTreeContext = {
     treeState: BaseTreeState;
     onSelect: OnSelectFunction;

package/components/Trees/BaseTree.js

@@ -120,7 +120,8 @@ const BaseTree = (props) => {
     const setTreeData = (treeData) => setState({ treeData: [...treeData] });
     (0, react_1.useEffect)(() => searchByKeyWord(props.searchValue), [props.searchValue]);
     const onSelect = (0, react_1.useCallback)((selectedKeys, evt, tree) => {
-        utils_1.PageUtil.stopEvent(evt === null || evt === void 0 ? void 0 : evt.nativeEvent);
+        if (evt.nativeEvent)
+            utils_1.PageUtil.stopEvent(evt.nativeEvent);
         if (props.mustSelect && selectedKeys.length == 0)
             return;
         if (selectedKeys.length == 0) {

package/components/Trees/DTree.js

@@ -105,6 +105,7 @@ const _Dtree = (props) => {
             onSelect([
                 tree[0][treeState.keyField]
             ], {
+                selected: true,
                 selectedNodes: [
                     // @ts-ignore
                     { props: { data: { node: tree[0], position: [0] } } }
@@ -134,12 +135,5 @@ const _Dtree = (props) => {
         data.children = children;
         setTreeData(tree);
     });
-    return react_1.default.createElement(antd_1.Tree, Object.assign({}, treeState.baseProps, treeProps, { className: treeState.className, loadData: loadData, 
-        // disabled={props.disabled}
-        onSelect: (keys, evt) => {
-            console.log(keys, evt);
-        }, 
-        // onSelect={onSelect}
-        // selectedKeys={treeState.selectedKeys}
-        selectedKeys: treeState.selectedKeys }), (0, ActionTree_1.renderRoot)(props, treeState, actionContext));
+    return react_1.default.createElement(antd_1.Tree, Object.assign({}, treeState.baseProps, treeProps, { className: treeState.className, loadData: loadData, disabled: props.disabled, onSelect: onSelect, selectedKeys: treeState.selectedKeys }), (0, ActionTree_1.renderRoot)(props, treeState, actionContext));
 };

package/components/Trees/FTree.js

@@ -59,7 +59,12 @@ const _Ftree = (props) => {
         const tree = utils_1.TreeUtil.buildFlatTree(treeState, (0, ActionTree_1.getResponseList)(rootResp));
         setTreeData(tree);
         if (props.mustSelect && tree.length > 0) {
-            onSelect([tree[0][treeState.keyField]], { selectedNodes: [{ data: { node: tree[0], position: [0] } }] }, tree);
+            onSelect([tree[0][treeState.keyField]], {
+                selectedNodes: [
+                    // @ts-ignore
+                    { props: { data: { node: tree[0], position: [0] } } },
+                ]
+            }, tree);
         }
         setInit(true);
     }));

package/components/Trees/STree.js

@@ -56,7 +56,12 @@ const _Stree = (props) => {
         }
         setTreeData(tree);
         if (props.mustSelect && tree.length > 0) {
-            onSelect([tree[0][treeState.keyField]], { selectedNodes: [{ data: { node: tree[0], position: [0] } }] }, tree);
+            onSelect([tree[0][treeState.keyField]], {
+                selectedNodes: [
+                    //@ts-ignore
+                    { props: { data: { node: tree[0], position: [0] } } }
+                ]
+            }, tree);
         }
         setInit(true);
     }, [props.treeData]);

package/components/UForm/UForm.d.ts

@@ -1,22 +1,6 @@
 import React from 'react';
-import type { UFromProps } from './index';
+import type { UFromProps, UFormFunctions } from './index';
 import type { FormState } from './FormWrapper';
-import type { PlainObject } from '../../basetype';
-export type UFormFunctions = {
-    /**
-     * 获取当前表单数据
-    */
-    data: () => PlainObject;
-    /**
-     * 获取当前表单数据
-     * 会先进行验证表单有效性，验证不通过则不返回
-    */
-    validate: () => Promise<PlainObject>;
-    /**
-     * 重置表单
-    */
-    reset: () => void;
-};
 export declare const initValue: (props: UFromProps & {
     state: FormState;
 }) => {

package/components/UForm/UForm.js

@@ -58,21 +58,25 @@ const onChangeEvent = (state, field, form, update, values, extra) => {
     let size = 0;
     let needUpdate = false;
     const pushBus = (targetField, result) => {
-        if (lodash_1.default.isObject(result)) {
-            if (lodash_1.default.has(result, 'value'))
-                value[targetField] = result.value;
-            if (lodash_1.default.has(result, 'required')) {
+        if (result === null) {
+            value[targetField] = undefined;
+        }
+        else if (lodash_1.default.isPlainObject(result)) {
+            const data = result;
+            if (lodash_1.default.has(data, 'value'))
+                value[targetField] = data.value;
+            if (lodash_1.default.has(data, 'required')) {
                 if (!requireFields.current.has(targetField)) {
                     needUpdate = true;
-                    requireFields.current.set(targetField, result.required);
+                    requireFields.current.set(targetField, data.required);
                 }
-                else if (requireFields.current.get(targetField) != result.required) {
+                else if (requireFields.current.get(targetField) != data.required) {
                     needUpdate = true;
-                    requireFields.current.set(targetField, result.required);
+                    requireFields.current.set(targetField, data.required);
                 }
             }
-            if (lodash_1.default.has(result, 'disabled')) {
-                if (result.disabled) {
+            if (lodash_1.default.has(data, 'disabled')) {
+                if (data.disabled) {
                     if (!disableFields.current.has(targetField)) {
                         needUpdate = true;
                         disableFields.current.add(targetField);
@@ -83,8 +87,8 @@ const onChangeEvent = (state, field, form, update, values, extra) => {
                     disableFields.current.delete(targetField);
                 }
             }
-            if (lodash_1.default.has(result, 'show')) {
-                if (result.show) {
+            if (lodash_1.default.has(data, 'show')) {
+                if (data.show) {
                     if (hiddenFields.current.has(targetField)) {
                         needUpdate = true;
                         hiddenFields.current.delete(targetField);
@@ -95,16 +99,16 @@ const onChangeEvent = (state, field, form, update, values, extra) => {
                     hiddenFields.current.add(targetField);
                 }
             }
-            if (lodash_1.default.has(result, 'options')) {
-                if (result.options === null) {
+            if (lodash_1.default.has(data, 'options')) {
+                if (data.options === null) {
                     if (optionFields.current.has(targetField)) {
                         needUpdate = true;
                         optionFields.current.delete(targetField);
                     }
                 }
-                else if (optionFields.current.get(targetField) != result.options) {
+                else if (optionFields.current.get(targetField) != data.options) {
                     needUpdate = true;
-                    optionFields.current.set(targetField, result.options);
+                    optionFields.current.set(targetField, data.options);
                 }
             }
         }
@@ -121,9 +125,10 @@ const onChangeEvent = (state, field, form, update, values, extra) => {
     };
     field.link.map(link => {
         const resp = link.call(values, getValue(multipleFields.current, form.getFieldsValue()), extra);
-        if (resp === null)
-            return;
-        if (resp instanceof Promise) {
+        if (resp === null) {
+            pushBus(link.field, null);
+        }
+        else if (resp instanceof Promise) {
             resp.then(result => pushBus(link.field, result));
         }
         else {
@@ -132,15 +137,6 @@ const onChangeEvent = (state, field, form, update, values, extra) => {
     });
     return values;
 };
-// const FieldContent = (component: InputComponent, field: UFormField)=>{
-//     React.createElement(component.element, {
-//         form: this.props.form,
-//         field,
-//         disabled: this.disableFields.has(field.field),
-//         options: (this.reOptions.has(field.field) ? this.reOptions.get(field.field) : undefined)
-//     })
-// }
-// export type FormFieldComponent = ComponentType<FormFieldProps>;
 const renderFormField = (state, field, form, update, data) => {
     const input = (0, _register_1.getUFormInput)(field.type || 'text');
     const { labelSpan, inputSpan, colSpan, cols, disableFields, hiddenFields, requireFields, optionFields, } = state;
@@ -347,11 +343,9 @@ const _FormField = (props) => {
     const { form } = props;
     const update = (0, useUpdate_1.useUpdate)();
     (0, react_1.useEffect)(() => {
-        // console.log('dfdsaupdate')
         const values = (0, exports.initValue)(props);
         props.initRef.current = values;
-        console.log(values);
-        form.setFieldsValue(props.initRef.current);
+        form.setFieldsValue(values);
         props.fields.map(field => {
             if (field == null || field == false)
                 return;
@@ -361,12 +355,9 @@ const _FormField = (props) => {
             if (lodash_1.default.isArray(field.link) && field.link.length > 0)
                 setTimeout(() => onChangeEvent(props.state, field, form, update, values[field.field]), 2);
         });
-        // console.log('google')
         update();
     }, []);
-    // console.log(props.initRef.current)
-    // return Const.NONE
-    // if (props.initRef.current === null) return Const.NONE;
+    // if (props.initRef.current === null) return Const.NONE; 1.5 版本必须注释此行
     const data = form.getFieldsValue();
     return props.fields.map(field => {
         if (field == null || field === false)
@@ -397,7 +388,7 @@ const _FormGroup = (props) => {
         });
         update();
     }, []);
-    // if (props.initRef.current === null) return Const.NONE;
+    // if (props.initRef.current === null) return Const.NONE; 1.5 版本必须注释此行
     const data = form.getFieldsValue();
     return props.fields.map(group => {
         if (group == null || group === false)
@@ -453,33 +444,10 @@ const _UForm = (0, react_1.forwardRef)((props, ref) => {
                 checkMultiple(item);
             }
         });
-        // initRef.current = initValue({ ...props, state })
-        // if (state.isGroup) {
-        //     props.fields.map(group => {
-        //         if (group == null || group == false) return;
-        //         (group as UFormFieldGroup).fields.map(field => {
-        //             // @ts-ignore
-        //             if (field == null || field == false) return;
-        //             if (!_.has(initRef.current, field.field) || initRef.current[field.field] === null || initRef.current[field.field] === undefined) return;
-        //             // setFieldsValue 要 render 后才能get ,延时执行 link事件
-        //             // if (_.isArray(field.link) && field.link.length > 0) setTimeout(() => onChangeEvent(state, field, form, update, values[field.field]), 2);
-        //         })
-        //     })
-        // } else {
-        //     props.fields.map(field => {
-        //         if (field == null || field == false) return;
-        //         if (!_.has(initRef.current, field.field) || initRef.current[field.field] === null || initRef.current[field.field] === undefined) return;
-        //         // setFieldsValue 要 render 后才能get ,延时执行 link事件
-        //         // if (_.isArray(field.link) && field.link.length > 0) setTimeout(() => onChangeEvent(props.state, field, form, update, values[field.field]), 2);
-        //     })
-        // }
-        // form.setFieldsValue(initRef.current, () => setChecked(true))
         setChecked(true);
     }, []);
     if (!checked)
         return utils_1.Const.NONE;
-    // console.log(initRef)
-    // console.log('fdsafd')
     return react_1.default.createElement(antd_1.Form
     // defaultValue={initRef.current}
     // initialValues={props.default}

package/components/UForm/UInfoModal.js

@@ -13,9 +13,6 @@ const Const_1 = require("../_setup/Const");
 const FormWrapper_1 = require("./FormWrapper");
 const FORM_FIELDS = ['layout', 'fields', 'groupType', 'isEdit', 'tip', 'default', 'data', 'mode', 'hideBorder', 'theme'];
 const UInfoModal = (props) => {
-    const [open, afterClose] = (0, Modal_1.useDestoryModal)(props);
-    if (!open)
-        return utils_1.Const.NONE;
     const param = lodash_1.default.omit(props, FORM_FIELDS);
     if (!lodash_1.default.has(props, 'title') && lodash_1.default.has(props, 'autoTitle')) {
         let name = null;

package/components/UForm/index.d.ts

@@ -270,6 +270,7 @@ export type UFromAction = ButtonProps & {
     /**
      * icon
     */
+    icon?: string;
     /**
      * 1. submit 点击时会触发验证，不通过不回调 onClick
      * 2. button 不会触发验证
@@ -390,3 +391,18 @@ export type UDescriptionsItemProps = BaseItem & {
     */
     children: React.ReactNode;
 };
+export type UFormFunctions = {
+    /**
+     * 获取当前表单数据
+    */
+    data: () => PlainObject;
+    /**
+     * 获取当前表单数据
+     * 会先进行验证表单有效性，验证不通过则不返回
+    */
+    validate: () => Promise<PlainObject>;
+    /**
+     * 重置表单
+    */
+    reset: () => void;
+};

package/components/Upload/UploadFile.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadFile = void 0;
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../../utils");
-// import { Icon } from '../../components/_adapt/Icon';
 const useUpload_1 = require("./useUpload");
 const antd_1 = require("antd");
 const Button_1 = require("../_adapt/Button");

package/components/_adapt/ColorPicker.d.ts

@@ -1,9 +1,28 @@
-import type { FC } from 'react';
+import type { FC, ReactNode, PropsWithChildren } from 'react';
+import type { PopoverProps } from './Popover';
+interface PresetsItem {
+    label: ReactNode;
+    colors: string[];
+}
+/**
+ * 说明1.5版本仅支持HEX
+*/
+type ColorFormat = 'hex';
 export type ColorPickerProps = {
+    allowClear?: boolean;
+    arrow?: boolean;
+    size?: 'large' | 'middle' | 'small';
+    placement?: PopoverProps['placement'];
     value?: string;
     defaultValue?: string;
-    open?: boolean;
+    defaultFormat?: ColorFormat;
+    format?: ColorFormat;
     disabled?: boolean;
-    [props: string]: any;
+    disabledAlpha?: boolean;
+    destroyTooltipOnHide?: boolean;
+    onChange?: (value: any, hex: string) => void;
+    presets?: PresetsItem[];
+    showText?: boolean;
 };
-export declare const ColorPicker: FC<ColorPickerProps>;
+export declare const ColorPicker: FC<PropsWithChildren<ColorPickerProps>>;
+export {};

package/components/_adapt/ColorPicker.js

@@ -1,47 +1,111 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = void 0;
-const react_1 = __importDefault(require("react"));
-const _Support_1 = require("../../utils/_Support");
-const Color = (0, _Support_1.globalDefault)('_SketchPicker', null);
-// export type ColorPickerProps = Omit<RcColorPickerProps, 'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'disabledAlpha' | 'onChangeComplete'> & {
-//     value?: ColorValueType;
-//     defaultValue?: ColorValueType;
-//     children?: React.ReactNode;
-//     open?: boolean;
-//     disabled?: boolean;
-//     placement?: TriggerPlacement;
-//     trigger?: TriggerType;
-//     format?: keyof typeof ColorFormat;
-//     allowClear?: boolean;
-//     presets?: PresetsItem[];
-//     arrow?: boolean | {
-//         pointAtCenter: boolean;
-//     };
-//     panelRender?: (panel: React.ReactNode, extra: {
-//         components: {
-//             Picker: FC;
-//             Presets: FC;
-//         };
-//     }) => React.ReactNode;
-//     showText?: boolean | ((color: Color) => React.ReactNode);
-//     size?: SizeType;
-//     styles?: {
-//         popup?: CSSProperties;
-//         popupOverlayInner?: CSSProperties;
-//     };
-//     rootClassName?: string;
-//     disabledAlpha?: boolean;
-//     onOpenChange?: (open: boolean) => void;
-//     onFormatChange?: (format: ColorFormat) => void;
-//     onChange?: (value: Color, hex: string) => void;
-//     onClear?: () => void;
-//     onChangeComplete?: (value: Color) => void;
-// } & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
-const ColorPicker = (props) => {
-    return react_1.default.createElement(Color, null);
+const react_1 = __importStar(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const Popover_1 = require("./Popover");
+const Icon_1 = require("./Icon");
+const react_color_1 = require("react-color");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const ColorPicker = props => {
+    const [open, show] = (0, hooks_1.useToggle)();
+    const spanRef = (0, react_1.useRef)();
+    const [value, setValue] = (0, react_1.useState)(props.value || props.defaultValue);
+    const content = (0, react_1.useMemo)(() => {
+        if (props.children)
+            return props.children;
+        return react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("i", { style: { backgroundColor: value } }),
+            " ",
+            react_1.default.createElement("strong", null, (props.showText && value != null) ? react_1.default.createElement("span", null, value) : utils_1.Const.NONE));
+    }, [value]);
+    const popoverProps = (0, react_1.useMemo)(() => {
+        const popoverProps = {
+            placement: 'bottomLeft',
+            arrow: true,
+            overlayClassName: 'v-color-picker',
+            defaultOpen: false,
+            trigger: 'click',
+            getTooltipContainer: () => spanRef.current
+        };
+        if (lodash_1.default.has(props, 'placement'))
+            popoverProps.placement = props.placement;
+        if (lodash_1.default.has(props, 'arrow'))
+            popoverProps.arrow = props.arrow;
+        return popoverProps;
+    }, []);
+    const spanProps = (0, react_1.useMemo)(() => {
+        const spanProps = { className: 'v-color-picker-brick', };
+        if (props.size)
+            spanProps.className = spanProps.className + ' v-color-picker-brick-' + props.size;
+        return spanProps;
+    }, [props.disabled, props.value]);
+    const colorProps = (0, react_1.useMemo)(() => {
+        const colorProps = {
+            disableAlpha: false,
+            onChangeComplete: (color, evt) => {
+                utils_1.PageUtil.stopEvent(evt);
+                setValue(color.hex);
+                if (lodash_1.default.isFunction(props.onChange)) {
+                    props.onChange(color, color.hex);
+                }
+            }
+        };
+        if (props.presets) {
+            let colors = [];
+            props.presets.map(item => {
+                item.colors.map(color => colors.push(color));
+                // return {
+                //     color: item.colors,
+                //     title: item.label,
+                // }
+            });
+            colorProps.presetColors = colors;
+        }
+        if (props.disabledAlpha)
+            colorProps.disableAlpha = true;
+        return colorProps;
+    }, []);
+    const clearColor = () => {
+        setValue(null);
+        props.onChange(null, null);
+    };
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", Object.assign({}, spanProps, { ref: spanRef, onClick: evt => utils_1.PageUtil.stopEvent(evt, show) }),
+            content,
+            value != null && props.allowClear && react_1.default.createElement(Icon_1.Icon, { type: 'close', onClick: clearColor })),
+        "\u00A0",
+        react_1.default.createElement(Popover_1.Popover, Object.assign({ open: open }, popoverProps, { onOpenChange: (isOpen) => {
+                if (!isOpen) {
+                    show(false);
+                }
+            }, content: react_1.default.createElement(react_color_1.SketchPicker, Object.assign({}, colorProps, { color: value })) })));
 };
 exports.ColorPicker = ColorPicker;