ods-component-lib 1.4.4 → 1.5.2

package/dist/index.modern.js

@@ -1,9 +1,26 @@
 import React, { useState } from 'react';
-import { AutoComplete, Button, Dropdown, Checkbox, DatePicker, Divider, Input, Form, Modal, Radio, Rate, Select, Switch, Table, TimePicker } from 'antd';
+import { AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Input, Form, Image, List, Modal, Radio, Rate, Select, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker } from 'antd';
 import styled from 'styled-components';
+import Card from 'antd/es/card/Card';
 import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined } from '@ant-design/icons';
+import message from 'antd/es/message';
+import Parser from 'html-react-parser';
 import { DataGrid, SearchPanel, FilterRow, ColumnChooser, Editing, Column, RequiredRule } from 'devextreme-react/data-grid';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : 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);
+}
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
     raw = strings.slice(0);
@@ -49,16 +66,40 @@ function OdsDropdownButton(props) {
 }
 
 var _templateObject$2;
-var StyledCheckbox = styled(Checkbox)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
+var StyledCalendar = styled(Calendar)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+
+function OdsCalendar(props) {
+  return React.createElement(React.Fragment, null, React.createElement(StyledCalendar, Object.assign({}, props)));
+}
+
+var _templateObject$3;
+var StyledCard = styled(Card)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+var Meta = Card$1.Meta;
+function OdsCard(props) {
+  return React.createElement(React.Fragment, null, React.createElement(StyledCard, Object.assign({}, props)), props.isEnableMeta && React.createElement(Meta, {
+    title: props.metaTitle,
+    description: props.metaDescription
+  }));
+}
+
+var _templateObject$4;
+var StyledCheckbox = styled(Checkbox)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
 
 function OdsCheckbox(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledCheckbox, Object.assign({}, props)));
 }
 
-var _templateObject$3;
-var StyledDatepicker = styled(DatePicker)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+function OdsCheckboxGroup(props) {
+  return React.createElement(React.Fragment, null, React.createElement(Checkbox.Group, {
+    options: props.options
+  }, props.children));
+}
+
+var _templateObject$5;
+var StyledDatepicker = styled(DatePicker)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
-function OdsDatepicker(props) {
+function OdsDateRangePicker(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledDatepicker.RangePicker, Object.assign({}, props, {
     style: {
       width: '100%'
@@ -66,15 +107,31 @@ function OdsDatepicker(props) {
   })));
 }
 
-var _templateObject$4;
-var StyledDivider = styled(Divider)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$6;
+var StyledDivider = styled(Divider)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsDivider(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledDivider, Object.assign({}, props)));
 }
 
-var _templateObject$5;
-var StyledInput = styled(Input)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$7;
+var StyledDropdown = styled(Dropdown)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+var handleMenuClick = function handleMenuClick(e) {
+  console.log('click', e);
+};
+function OdsCollapse(props) {
+  var menuProps = {
+    items: props.menuItems,
+    onClick: handleMenuClick
+  };
+  return React.createElement(React.Fragment, null, React.createElement(StyledDropdown, {
+    menu: menuProps
+  }, props.children));
+}
+
+var _templateObject$8;
+var StyledInput = styled(Input)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsInput(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledInput, Object.assign({}, props), props.children));
@@ -106,11 +163,10 @@ function OdsBasicForm(props) {
   return React.createElement(Form, Object.assign({
     onFinish: onFinish,
     onFinishFailed: onFinishFailed
-  }, layout), props.formItems.map(function (formItem, i) {
+  }, layout), props.formItems.map(function (formItem) {
     return React.createElement(Form.Item, {
       label: formItem.label,
       name: formItem.name,
-      key: i,
       rules: formItem.rules
     }, renderElement(formItem.formItemType));
   }), props.formButtons.map(function (formButton) {
@@ -121,12 +177,50 @@ function OdsBasicForm(props) {
   }));
 }
 
+function OdsImagePreviewGroup() {
+  var _useState = useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  return React.createElement(React.Fragment, null, React.createElement(Image, {
+    preview: {
+      visible: false
+    },
+    width: 200,
+    src: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }), React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, React.createElement(Image.PreviewGroup, {
+    preview: {
+      visible: visible,
+      onVisibleChange: function onVisibleChange(vis) {
+        return setVisible(vis);
+      }
+    }
+  }, React.createElement(Image, {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
+  }), React.createElement(Image, {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
+  }), React.createElement(Image, {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp"
+  }))));
+}
+
+function OdsImage(props) {
+  var isMultiple = props.images != null && props.images.length > 0;
+  return React.createElement(React.Fragment, null, isMultiple ? React.createElement(Image, Object.assign({}, props)) : React.createElement(OdsImagePreviewGroup, Object.assign({}, props)));
+}
+
 function OdsPassword(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledInput.Password, Object.assign({}, props, {
     iconRender: function iconRender(visible) {
       return visible ? React.createElement(EyeTwoTone, null) : React.createElement(EyeInvisibleOutlined, null);
     }
-  })));
+  }), " ", props.children));
 }
 
 function OdsSearch(props) {
@@ -134,35 +228,107 @@ function OdsSearch(props) {
 }
 
 function OdsTextArea(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledInput.TextArea, Object.assign({}, props)));
+  return React.createElement(React.Fragment, null, React.createElement(StyledInput.TextArea, Object.assign({}, props), props.children));
+}
+
+var _templateObject$9;
+var StyledList = styled(List)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsList(props) {
+  props.size = "default";
+  return React.createElement(React.Fragment, null, React.createElement(StyledList, {
+    size: props.size,
+    header: props.showHeader && React.createElement("div", null, props.headerText),
+    footer: props.showFooter && React.createElement("div", null, props.footerText),
+    bordered: true,
+    dataSource: props.data,
+    renderItem: function renderItem(item) {
+      return React.createElement(List.Item, null, item);
+    }
+  }, props.children));
+}
+
+function info(content, duration) {
+  if (duration === void 0) {
+    duration = 10;
+  }
+  return message.info(content, duration);
+}
+function error(content, duration) {
+  if (duration === void 0) {
+    duration = 10;
+  }
+  return message.error(content, duration);
+}
+function warning(content, duration) {
+  if (duration === void 0) {
+    duration = 10;
+  }
+  return message.warning(content, duration);
+}
+function loading(content, duration) {
+  if (duration === void 0) {
+    duration = 10;
+  }
+  return message.loading(content, duration);
+}
+function success(content, duration) {
+  if (duration === void 0) {
+    duration = 10;
+  }
+  return message.success(content, duration);
+}
+function OdsMessage(type, content, duration) {
+  if (duration === void 0) {
+    duration = 10;
+  }
+  var contentt;
+  switch (type) {
+    case "info":
+      contentt = info(content, duration);
+      break;
+    case "error":
+      contentt = error(content, duration);
+      break;
+    case "warning":
+      contentt = warning(content, duration);
+      break;
+    case "loading":
+      contentt = loading(content, duration);
+      break;
+    case "success":
+      contentt = success(content, duration);
+      break;
+  }
+  return React.createElement(React.Fragment, null, contentt);
 }
 
 function OdsModal(props) {
-  var _useState = useState(false),
-    isModalOpen = _useState[0],
-    setIsModalOpen = _useState[1];
-  var handleOk = function handleOk() {
-    setIsModalOpen(false);
-  };
-  var handleCancel = function handleCancel() {
-    setIsModalOpen(false);
-  };
   return React.createElement(React.Fragment, null, React.createElement(Modal, Object.assign({}, props, {
-    open: isModalOpen,
-    onOk: handleOk,
-    onCancel: handleCancel
-  }), React.createElement("p", null, "Some contents..."), React.createElement("p", null, "Some contents..."), React.createElement("p", null, "Some contents...")));
+    open: props.open,
+    onOk: props.onOk,
+    onCancel: props.onCancel
+  }), React.createElement("div", {
+    className: "content"
+  }, Parser(props.content))));
 }
 
-var _templateObject$6;
-var StyledRadio = styled(Radio)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$a;
+var StyledRadio = styled(Radio)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsRadio(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledRadio, Object.assign({}, props)));
+  return React.createElement(React.Fragment, null, React.createElement(StyledRadio, Object.assign({}, props), props.children));
 }
 
-var _templateObject$7;
-var StyledRate = styled(Rate)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n //\n"])));
+function OdsRadioGroup(props) {
+  return React.createElement(React.Fragment, null, React.createElement(Radio.Group, Object.assign({
+    options: props.options,
+    value: props.defaultValue
+  }, props), props.children));
+}
+
+var _templateObject$b;
+var StyledRate = styled(Rate)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 var customIcons = {
   1: React.createElement(FrownOutlined, null),
@@ -176,29 +342,114 @@ function OdsRate(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledRate, Object.assign({}, props)));
 }
 
-var _templateObject$8;
-var StyledSelect = styled(Select)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var _templateObject$c;
+var StyledSelect = styled(Select)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsSelect(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledSelect, Object.assign({}, props)));
 }
 
-var _templateObject$9;
-var StyledSwitch = styled(Switch)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$d;
+var StyledSpin = styled(Spin)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsSpin(props) {
+  var _useState = useState(true),
+    loading = _useState[0];
+  props.size = "default";
+  return React.createElement(React.Fragment, null, React.createElement(StyledSpin, Object.assign({}, props, {
+    spinning: loading
+  }), props.children));
+}
+
+var _templateObject$e;
+var StyledSwitch = styled(Switch)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsSwitch(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledSwitch, Object.assign({}, props)));
 }
 
-var _templateObject$a;
-var StyledTable = styled(Table)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$f;
+var StyledTabs = styled(Tabs)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n //\n"])));
 
-function OdsTable(props) {
+var onChange = function onChange(key) {
+  console.log(key);
+};
+var items$1 = [{
+  key: '1',
+  label: "Tab 1",
+  children: "Content of Tab Pane 1",
+  disabled: true
+}, {
+  key: '2',
+  label: "Tab 2",
+  children: "Content of Tab Pane 2"
+}, {
+  key: '3',
+  label: "Tab 3",
+  children: "Content of Tab Pane 3"
+}];
+function OdsTab(props) {
+  var _useState = useState(),
+    size = _useState[0],
+    setSize = _useState[1];
+  var _useState2 = useState(),
+    tabPosition = _useState2[0],
+    setTabPosition = _useState2[1];
+  setTabPosition("top");
+  setSize("middle");
+  return React.createElement(React.Fragment, null, React.createElement(StyledTabs, Object.assign({}, props, {
+    tabPosition: tabPosition,
+    size: size,
+    defaultActiveKey: "1",
+    items: items$1,
+    onChange: onChange
+  }), props.children));
+}
+
+var _templateObject$g;
+var StyledTable = styled(Table)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsBasicTable(props) {
   return React.createElement(React.Fragment, null, React.createElement(StyledTable, Object.assign({}, props)));
 }
 
-var _templateObject$b;
-var StyledTimepicker = styled(TimePicker)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var rowSelection = {
+  onChange: function onChange(selectedRowKeys, selectedRows) {
+    console.log("selectedRowKeys: " + selectedRowKeys, 'selectedRows: ', selectedRows);
+  }
+};
+function OdsSelectableTable(props) {
+  var _useState = useState('checkbox'),
+    selectionType = _useState[0],
+    setSelectionType = _useState[1];
+  setSelectionType('checkbox');
+  return React.createElement(React.Fragment, null, React.createElement(StyledTable, Object.assign({}, props, {
+    rowSelection: _extends({
+      type: selectionType
+    }, rowSelection)
+  })));
+}
+
+var _templateObject$h;
+var StyledTag = styled(Tag)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsTag(props) {
+  return React.createElement(React.Fragment, null, React.createElement(StyledTag, Object.assign({}, props), props.children));
+}
+
+var _templateObject$i;
+var StyledtTimeline = styled(Timeline)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsTimeline(props) {
+  return React.createElement(React.Fragment, null, React.createElement(StyledtTimeline, Object.assign({}, props), props.children));
+}
+
+var _templateObject$j;
+var StyledTimepicker = styled(TimePicker)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+
+function OdsRangeTimepicker(props) {
+  return React.createElement(React.Fragment, null, React.createElement(StyledTimepicker.RangePicker, Object.assign({}, props)));
+}
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -226,13 +477,13 @@ function grid(props) {
     columnAutoWidth: props.columnAutoWidth,
     allowColumnReordering: props.allowColumnReordering,
     keyExpr: props.keyExpr
-  }, props.searcEnable && React.createElement(SearchPanel, {
+  }, props.searchEnable && React.createElement(SearchPanel, {
     visible: true
   }), props.filterEnable && React.createElement(FilterRow, {
     visible: true
   }), props.columnChooserEnable && React.createElement(ColumnChooser, {
     enabled: true
-  }), ",", props.editEnable && React.createElement(Editing, {
+  }), props.editEnable && React.createElement(Editing, {
     mode: props.edit.mode,
     allowUpdating: true,
     allowDeleting: true,
@@ -246,5 +497,5 @@ function grid(props) {
   })));
 }
 
-export { OdsAutoComplete, OdsBasicForm, OdsButton, OdsCheckbox, OdsDataGrid, OdsDatepicker, OdsDivider, OdsDropdownButton, OdsInput, OdsModal, OdsPassword, OdsRadio, OdsRate, OdsSearch, OdsSelect, OdsSwitch, OdsTable, OdsTextArea, OdsTimepicker };
+export { OdsAutoComplete, OdsBasicForm, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDateRangePicker as OdsDatepicker, OdsDivider, OdsCollapse as OdsDropdown, OdsDropdownButton, OdsImage, OdsInput, OdsList, OdsMessage, OdsModal, OdsPassword, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsSearch, OdsSelect, OdsSelectableTable, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsTextArea, OdsTimeline, OdsTimepicker };
 //# sourceMappingURL=index.modern.js.map