ods-component-lib 1.4.4 → 1.5.2

package/dist/index.js

@@ -4,9 +4,26 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var antd = require('antd');
 var styled = _interopDefault(require('styled-components'));
+var Card = _interopDefault(require('antd/es/card/Card'));
 var icons = require('@ant-design/icons');
+var message = _interopDefault(require('antd/es/message'));
+var Parser = _interopDefault(require('html-react-parser'));
 var dataGrid = require('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);
@@ -52,16 +69,40 @@ function OdsDropdownButton(props) {
 }
 
 var _templateObject$2;
-var StyledCheckbox = styled(antd.Checkbox)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
+var StyledCalendar = styled(antd.Calendar)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+
+function OdsCalendar(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledCalendar, Object.assign({}, props)));
+}
+
+var _templateObject$3;
+var StyledCard = styled(Card)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+var Meta = antd.Card.Meta;
+function OdsCard(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledCard, Object.assign({}, props)), props.isEnableMeta && React__default.createElement(Meta, {
+    title: props.metaTitle,
+    description: props.metaDescription
+  }));
+}
+
+var _templateObject$4;
+var StyledCheckbox = styled(antd.Checkbox)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
 
 function OdsCheckbox(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledCheckbox, Object.assign({}, props)));
 }
 
-var _templateObject$3;
-var StyledDatepicker = styled(antd.DatePicker)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+function OdsCheckboxGroup(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Checkbox.Group, {
+    options: props.options
+  }, props.children));
+}
+
+var _templateObject$5;
+var StyledDatepicker = styled(antd.DatePicker)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
-function OdsDatepicker(props) {
+function OdsDateRangePicker(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledDatepicker.RangePicker, Object.assign({}, props, {
     style: {
       width: '100%'
@@ -69,15 +110,31 @@ function OdsDatepicker(props) {
   })));
 }
 
-var _templateObject$4;
-var StyledDivider = styled(antd.Divider)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$6;
+var StyledDivider = styled(antd.Divider)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsDivider(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledDivider, Object.assign({}, props)));
 }
 
-var _templateObject$5;
-var StyledInput = styled(antd.Input)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$7;
+var StyledDropdown = styled(antd.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__default.createElement(React__default.Fragment, null, React__default.createElement(StyledDropdown, {
+    menu: menuProps
+  }, props.children));
+}
+
+var _templateObject$8;
+var StyledInput = styled(antd.Input)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsInput(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledInput, Object.assign({}, props), props.children));
@@ -109,11 +166,10 @@ function OdsBasicForm(props) {
   return React__default.createElement(antd.Form, Object.assign({
     onFinish: onFinish,
     onFinishFailed: onFinishFailed
-  }, layout), props.formItems.map(function (formItem, i) {
+  }, layout), props.formItems.map(function (formItem) {
     return React__default.createElement(antd.Form.Item, {
       label: formItem.label,
       name: formItem.name,
-      key: i,
       rules: formItem.rules
     }, renderElement(formItem.formItemType));
   }), props.formButtons.map(function (formButton) {
@@ -124,12 +180,50 @@ function OdsBasicForm(props) {
   }));
 }
 
+function OdsImagePreviewGroup() {
+  var _useState = React.useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.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__default.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, React__default.createElement(antd.Image.PreviewGroup, {
+    preview: {
+      visible: visible,
+      onVisibleChange: function onVisibleChange(vis) {
+        return setVisible(vis);
+      }
+    }
+  }, React__default.createElement(antd.Image, {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
+  }), React__default.createElement(antd.Image, {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp"
+  }), React__default.createElement(antd.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__default.createElement(React__default.Fragment, null, isMultiple ? React__default.createElement(antd.Image, Object.assign({}, props)) : React__default.createElement(OdsImagePreviewGroup, Object.assign({}, props)));
+}
+
 function OdsPassword(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledInput.Password, Object.assign({}, props, {
     iconRender: function iconRender(visible) {
       return visible ? React__default.createElement(icons.EyeTwoTone, null) : React__default.createElement(icons.EyeInvisibleOutlined, null);
     }
-  })));
+  }), " ", props.children));
 }
 
 function OdsSearch(props) {
@@ -137,35 +231,107 @@ function OdsSearch(props) {
 }
 
 function OdsTextArea(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledInput.TextArea, Object.assign({}, props)));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledInput.TextArea, Object.assign({}, props), props.children));
+}
+
+var _templateObject$9;
+var StyledList = styled(antd.List)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsList(props) {
+  props.size = "default";
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledList, {
+    size: props.size,
+    header: props.showHeader && React__default.createElement("div", null, props.headerText),
+    footer: props.showFooter && React__default.createElement("div", null, props.footerText),
+    bordered: true,
+    dataSource: props.data,
+    renderItem: function renderItem(item) {
+      return React__default.createElement(antd.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__default.createElement(React__default.Fragment, null, contentt);
 }
 
 function OdsModal(props) {
-  var _useState = React.useState(false),
-    isModalOpen = _useState[0],
-    setIsModalOpen = _useState[1];
-  var handleOk = function handleOk() {
-    setIsModalOpen(false);
-  };
-  var handleCancel = function handleCancel() {
-    setIsModalOpen(false);
-  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Modal, Object.assign({}, props, {
-    open: isModalOpen,
-    onOk: handleOk,
-    onCancel: handleCancel
-  }), React__default.createElement("p", null, "Some contents..."), React__default.createElement("p", null, "Some contents..."), React__default.createElement("p", null, "Some contents...")));
+    open: props.open,
+    onOk: props.onOk,
+    onCancel: props.onCancel
+  }), React__default.createElement("div", {
+    className: "content"
+  }, Parser(props.content))));
 }
 
-var _templateObject$6;
-var StyledRadio = styled(antd.Radio)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$a;
+var StyledRadio = styled(antd.Radio)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsRadio(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledRadio, Object.assign({}, props)));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledRadio, Object.assign({}, props), props.children));
 }
 
-var _templateObject$7;
-var StyledRate = styled(antd.Rate)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n //\n"])));
+function OdsRadioGroup(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Radio.Group, Object.assign({
+    options: props.options,
+    value: props.defaultValue
+  }, props), props.children));
+}
+
+var _templateObject$b;
+var StyledRate = styled(antd.Rate)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 var customIcons = {
   1: React__default.createElement(icons.FrownOutlined, null),
@@ -179,29 +345,114 @@ function OdsRate(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledRate, Object.assign({}, props)));
 }
 
-var _templateObject$8;
-var StyledSelect = styled(antd.Select)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+var _templateObject$c;
+var StyledSelect = styled(antd.Select)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
 
 function OdsSelect(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSelect, Object.assign({}, props)));
 }
 
-var _templateObject$9;
-var StyledSwitch = styled(antd.Switch)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$d;
+var StyledSpin = styled(antd.Spin)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsSpin(props) {
+  var _useState = React.useState(true),
+    loading = _useState[0];
+  props.size = "default";
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSpin, Object.assign({}, props, {
+    spinning: loading
+  }), props.children));
+}
+
+var _templateObject$e;
+var StyledSwitch = styled(antd.Switch)(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n //\n"])));
 
 function OdsSwitch(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledSwitch, Object.assign({}, props)));
 }
 
-var _templateObject$a;
-var StyledTable = styled(antd.Table)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n //\n"])));
+var _templateObject$f;
+var StyledTabs = styled(antd.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 = React.useState(),
+    size = _useState[0],
+    setSize = _useState[1];
+  var _useState2 = React.useState(),
+    tabPosition = _useState2[0],
+    setTabPosition = _useState2[1];
+  setTabPosition("top");
+  setSize("middle");
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTabs, Object.assign({}, props, {
+    tabPosition: tabPosition,
+    size: size,
+    defaultActiveKey: "1",
+    items: items$1,
+    onChange: onChange
+  }), props.children));
+}
+
+var _templateObject$g;
+var StyledTable = styled(antd.Table)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsBasicTable(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTable, Object.assign({}, props)));
 }
 
-var _templateObject$b;
-var StyledTimepicker = styled(antd.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 = React.useState('checkbox'),
+    selectionType = _useState[0],
+    setSelectionType = _useState[1];
+  setSelectionType('checkbox');
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTable, Object.assign({}, props, {
+    rowSelection: _extends({
+      type: selectionType
+    }, rowSelection)
+  })));
+}
+
+var _templateObject$h;
+var StyledTag = styled(antd.Tag)(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsTag(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTag, Object.assign({}, props), props.children));
+}
+
+var _templateObject$i;
+var StyledtTimeline = styled(antd.Timeline)(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n //\n"])));
+
+function OdsTimeline(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledtTimeline, Object.assign({}, props), props.children));
+}
+
+var _templateObject$j;
+var StyledTimepicker = styled(antd.TimePicker)(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  width:100%;\n"])));
+
+function OdsRangeTimepicker(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTimepicker.RangePicker, Object.assign({}, props)));
+}
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -229,13 +480,13 @@ function grid(props) {
     columnAutoWidth: props.columnAutoWidth,
     allowColumnReordering: props.allowColumnReordering,
     keyExpr: props.keyExpr
-  }, props.searcEnable && React__default.createElement(dataGrid.SearchPanel, {
+  }, props.searchEnable && React__default.createElement(dataGrid.SearchPanel, {
     visible: true
   }), props.filterEnable && React__default.createElement(dataGrid.FilterRow, {
     visible: true
   }), props.columnChooserEnable && React__default.createElement(dataGrid.ColumnChooser, {
     enabled: true
-  }), ",", props.editEnable && React__default.createElement(dataGrid.Editing, {
+  }), props.editEnable && React__default.createElement(dataGrid.Editing, {
     mode: props.edit.mode,
     allowUpdating: true,
     allowDeleting: true,
@@ -251,21 +502,38 @@ function grid(props) {
 
 exports.OdsAutoComplete = OdsAutoComplete;
 exports.OdsBasicForm = OdsBasicForm;
+exports.OdsBasicTable = OdsBasicTable;
 exports.OdsButton = OdsButton;
+exports.OdsCalendar = OdsCalendar;
+exports.OdsCard = OdsCard;
 exports.OdsCheckbox = OdsCheckbox;
+exports.OdsCheckboxGroup = OdsCheckboxGroup;
+exports.OdsCollapse = OdsCollapse;
 exports.OdsDataGrid = OdsDataGrid;
-exports.OdsDatepicker = OdsDatepicker;
+exports.OdsDateRangePicker = OdsDateRangePicker;
+exports.OdsDatepicker = OdsDateRangePicker;
 exports.OdsDivider = OdsDivider;
+exports.OdsDropdown = OdsCollapse;
 exports.OdsDropdownButton = OdsDropdownButton;
+exports.OdsImage = OdsImage;
 exports.OdsInput = OdsInput;
+exports.OdsList = OdsList;
+exports.OdsMessage = OdsMessage;
 exports.OdsModal = OdsModal;
 exports.OdsPassword = OdsPassword;
 exports.OdsRadio = OdsRadio;
+exports.OdsRadioGroup = OdsRadioGroup;
+exports.OdsRangeTimepicker = OdsRangeTimepicker;
 exports.OdsRate = OdsRate;
 exports.OdsSearch = OdsSearch;
 exports.OdsSelect = OdsSelect;
+exports.OdsSelectableTable = OdsSelectableTable;
+exports.OdsSpin = OdsSpin;
 exports.OdsSwitch = OdsSwitch;
-exports.OdsTable = OdsTable;
+exports.OdsTab = OdsTab;
+exports.OdsTable = OdsBasicTable;
+exports.OdsTag = OdsTag;
 exports.OdsTextArea = OdsTextArea;
+exports.OdsTimeline = OdsTimeline;
 exports.OdsTimepicker = OdsTimepicker;
 //# sourceMappingURL=index.js.map