ods-component-lib 1.12.1 → 1.13.0

package/dist/index.modern.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Input, Form, Image, InputNumber, List, Modal, notification, Radio, Rate, Select, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography } from 'antd';
-import styled from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import Card from 'antd/es/card/Card';
 import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, UserOutlined, LockOutlined } from '@ant-design/icons';
 import 'react-phone-input-2/lib/style.css';
@@ -44,8 +44,342 @@ function OdsAutoComplete(props) {
 var _templateObject$1;
 var StyledButton = styled(Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  box-shadow: none;\n"])));
 
+var lightTheme = {
+  token: {
+    blue1: "#e6f4ff",
+    blue2: "#bae0ff",
+    blue3: "#91caff",
+    blue4: "#69b1ff",
+    blue5: "#4096ff",
+    blue6: "#1677ff",
+    blue7: "#0958d9",
+    blue8: "#003eb3",
+    blue9: "#002c8c",
+    blue10: "#001d66",
+    purple1: "#f9f0ff",
+    purple2: "#efdbff",
+    purple3: "#d3adf7",
+    purple4: "#b37feb",
+    purple5: "#9254de",
+    purple6: "#722ed1",
+    purple7: "#531dab",
+    purple8: "#391085",
+    purple9: "#22075e",
+    purple10: "#120338",
+    cyan1: "#e6fffb",
+    cyan2: "#b5f5ec",
+    cyan3: "#87e8de",
+    cyan4: "#5cdbd3",
+    cyan5: "#36cfc9",
+    cyan6: "#13c2c2",
+    cyan7: "#08979c",
+    cyan8: "#006d75",
+    cyan9: "#00474f",
+    cyan10: "#002329",
+    green1: "#f6ffed",
+    green2: "#d9f7be",
+    green3: "#b7eb8f",
+    green4: "#95de64",
+    green5: "#73d13d",
+    green6: "#52c41a",
+    green7: "#389e0d",
+    green8: "#237804",
+    green9: "#135200",
+    green10: "#092b00",
+    magenta1: "#fff0f6",
+    magenta2: "#ffd6e7",
+    magenta3: "#ffadd2",
+    magenta4: "#ff85c0",
+    magenta5: "#f759ab",
+    magenta6: "#eb2f96",
+    magenta7: "#c41d7f",
+    magenta8: "#9e1068",
+    magenta9: "#780650",
+    magenta10: "#520339",
+    red1: "#fff1f0",
+    red2: "#ffccc7",
+    red3: "#ffa39e",
+    red4: "#ff7875",
+    red5: "#ff4d4f",
+    red6: "#f5222d",
+    red7: "#cf1322",
+    red8: "#a8071a",
+    red9: "#820014",
+    red10: "#5c0011",
+    orange1: "#fff7e6",
+    orange2: "#ffe7ba",
+    orange3: "#ffd591",
+    orange4: "#ffc069",
+    orange5: "#ffa940",
+    orange6: "#fa8c16",
+    orange7: "#d46b08",
+    orange8: "#ad4e00",
+    orange9: "#873800",
+    orange10: "#612500",
+    yellow1: "#feffe6",
+    yellow2: "#ffffb8",
+    yellow3: "#fffb8f",
+    yellow4: "#fff566",
+    yellow5: "#ffec3d",
+    yellow6: "#fadb14",
+    yellow7: "#d4b106",
+    yellow8: "#ad8b00",
+    yellow9: "#876800",
+    yellow10: "#614700",
+    volcano1: "#fff2e8",
+    volcano2: "#ffd8bf",
+    volcano3: "#ffbb96",
+    volcano4: "#ff9c6e",
+    volcano5: "#ff7a45",
+    volcano6: "#fa541c",
+    volcano7: "#d4380d",
+    volcano8: "#ad2102",
+    volcano9: "#871400",
+    volcano10: "#610b00",
+    geekblue1: "#f0f5ff",
+    geekblue2: "#d6e4ff",
+    geekblue3: "#adc6ff",
+    geekblue4: "#85a5ff",
+    geekblue5: "#597ef7",
+    geekblue6: "#2f54eb",
+    geekblue7: "#1d39c4",
+    geekblue8: "#10239e",
+    geekblue9: "#061178",
+    geekblue10: "#030852",
+    lime1: "#fcffe6",
+    lime2: "#f4ffb8",
+    lime3: "#eaff8f",
+    lime4: "#d3f261",
+    lime5: "#bae637",
+    lime6: "#a0d911",
+    lime7: "#7cb305",
+    lime8: "#5b8c00",
+    lime9: "#3f6600",
+    lime10: "#254000",
+    gold1: "#fffbe6",
+    gold2: "#fff1b8",
+    gold3: "#ffe58f",
+    gold4: "#ffd666",
+    gold5: "#ffc53d",
+    gold6: "#faad14",
+    gold7: "#d48806",
+    gold8: "#ad6800",
+    gold9: "#874d00",
+    gold10: "#613400",
+    colorTextBase: "#000",
+    colorTextLightSolid: "#ffffff",
+    colorBgBase: "#ffffff",
+    fontFamily: "Manrope",
+    fontSize: "14px",
+    lineWidth: "1px",
+    borderRadius: "6px",
+    sizeUnit: "4px",
+    sizePopupArrow: "16px",
+    controlHeight: "32px",
+    opacityImage: "1",
+    sizeStep: "4px",
+    colorPrimary: "#1677ff",
+    colorError: "#ff4d4f",
+    colorWarning: "#faad14",
+    colorSuccess: "#52c41a",
+    colorInfo: "#1677ff",
+    colorSecondary: "#F9B515",
+    sizeXxl: "48px",
+    sizeXl: "32px",
+    sizeLg: "24px",
+    sizeMd: "20px",
+    sizeMs: "16px",
+    size: "16px",
+    sizeSm: "12px",
+    sizeXs: "8px",
+    sizeXxs: "4px",
+    controlHeightSm: "24px",
+    controlHeightXs: "16px",
+    controlHeightLg: "40px",
+    borderRadiusXs: "2px",
+    borderRadiusSm: "4px",
+    borderRadiusLg: "8px",
+    borderRadiusOuter: "4px",
+    colorText: "rgba(0, 0, 0, 0.88)",
+    colorTextSecondary: "rgba(0, 0, 0, 0.65)",
+    colorTextTertiary: "rgba(0, 0, 0, 0.45)",
+    colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
+    colorFill: "rgba(0, 0, 0, 0.15)",
+    colorFillSecondary: "rgba(0, 0, 0, 0.06)",
+    colorFillTertiary: "rgba(0, 0, 0, 0.04)",
+    colorBgContainer: "#ffffff",
+    colorFillQuaternary: "rgba(0, 0, 0, 0.02)",
+    colorBgLayout: "#f5f5f5",
+    colorBgElevated: "#ffffff",
+    colorBgSpotlight: "rgba(0, 0, 0, 0.85)",
+    colorBorder: "rgba(0, 0, 0, 0.15)",
+    colorBorderSecondary: "rgba(0, 0, 0, 0.06)",
+    colorSplit: "rgba(0, 0, 0, 0.06)",
+    colorPrimaryBg: "#e6f4ff",
+    colorPrimaryBgHover: "#bae0ff",
+    colorPrimaryBorder: "#91caff",
+    colorPrimaryBorderHover: "#69b1ff",
+    colorPrimaryHover: "#4096ff",
+    colorPrimaryBase: "#1677ff",
+    colorPrimaryActive: "#0958d9",
+    colorPrimaryTextHover: "#003eb3",
+    colorPrimaryText: "#002c8c",
+    colorPrimaryTextActive: "#001d66",
+    colorSuccessBg: "#f6ffed",
+    colorSuccessBgHover: "#d9f7be",
+    colorSuccessBorder: "#b7eb8f",
+    colorSuccessBorderHover: "#95de64",
+    colorSuccessHover: "#73d13d",
+    colorSuccessBase: "#52c41a",
+    colorSuccessActive: "#389e0d",
+    colorSuccessTextHover: "#237804",
+    colorSuccessText: "#135200",
+    colorSuccessTextActive: "#092b00",
+    colorWarningBg: "#fffbe6",
+    colorWarningBgHover: "#fff1b8",
+    colorWarningBorder: "#ffe58f",
+    colorWarningBorderHover: "#ffd666",
+    colorWarningHover: "#ffc53d",
+    colorWarningBase: "#faad14",
+    colorWarningActive: "#d48806",
+    colorWarningTextHover: "#ad6800",
+    colorWarningText: "#874d00",
+    colorWarningTextActive: "#613400",
+    colorErrorBg: "#fff1f0",
+    colorErrorBgHover: "#ffccc7",
+    colorErrorBorder: "#ffa39e",
+    colorErrorBorderHover: "#ff7875",
+    colorErrorHover: "#ff7875",
+    colorErrorBase: "#ff4d4f",
+    colorErrorActive: "#cf1322",
+    colorErrorTextHover: "#a8071a",
+    colorErrorText: "#820014",
+    colorErrorTextActive: "#5c0011",
+    colorInfoBg: "#e6f4ff",
+    colorInfoBgHover: "#bae0ff",
+    colorInfoBorder: "#91caff",
+    colorInfoBorderHover: "#69b1ff",
+    colorInfoHover: "#4096ff",
+    colorInfoBase: "#1677ff",
+    colorInfoActive: "#0958d9",
+    colorInfoTextHover: "#003eb3",
+    colorInfoText: "#002c8c",
+    colorInfoTextActive: "#001d66",
+    colorBgMask: "rgba(0, 0, 0, 0.45)",
+    stepsDotSize: "8px",
+    stepsCurrentDotSize: "10px",
+    rateStarSize: "20px",
+    colorFillContent: "rgba(0, 0, 0, 0.06)",
+    colorFillContentHover: "rgba(0, 0, 0, 0.15)",
+    colorFillAlter: "rgba(0, 0, 0, 0.02)",
+    colorBgContainerDisabled: "rgba(0, 0, 0, 0.04)",
+    colorBorderBg: "#ffffff",
+    colorTextPlaceholder: "rgba(0, 0, 0, 0.25)",
+    colorTextDisabled: "rgba(0, 0, 0, 0.25)",
+    colorTextHeading: "rgba(0, 0, 0, 0.88)",
+    colorTextLabel: "rgba(0, 0, 0, 0.65)",
+    colorTextDescription: "rgba(0, 0, 0, 0.45)",
+    colorBgTextHover: "rgba(0, 0, 0, 0.06)",
+    colorBgTextActive: "rgba(0, 0, 0, 0.15)",
+    colorIcon: "rgba(0, 0, 0, 0.45)",
+    colorIconHover: "rgba(0, 0, 0, 0.88)",
+    colorLink: "#1677ff",
+    colorLinkHover: "#4096ff",
+    colorLinkActive: "#0958d9",
+    colorHighlight: "#ff7875",
+    controlOutline: "#e6f4ff",
+    colorWarningOutline: "#fffbe6",
+    colorErrorOutline: "#fff1f0",
+    fontSizeSm: "12px",
+    fontSizeLg: "16px",
+    fontSizeXl: "20px",
+    fontSizeIcon: "12px",
+    fontSizeHeading1: "38px",
+    fontSizeHeading2: "30px",
+    fontSizeHeading3: "24px",
+    fontSizeHeading4: "20px",
+    fontSizeHeading5: "16px",
+    fontWeightNormal: "400",
+    fontWeightStrong: "600",
+    controlLineWidth: "1px",
+    controlOutlineWidth: "2px",
+    controlItemBgHover: "rgba(0, 0, 0, 0.04)",
+    controlItemBgActive: "#e6f4ff",
+    controlItemBgActiveHover: "#bae0ff",
+    controlInteractiveSize: "16px",
+    controlItemBgActiveDisabled: "rgba(0, 0, 0, 0.15)",
+    controlTmpOutline: "rgba(0, 0, 0, 0.02)",
+    opacityLoading: "0.65",
+    padding: "16px",
+    paddingMd: "20px",
+    paddingSm: "12px",
+    paddingXs: "8px",
+    paddingXxs: "4px",
+    paddingLg: "24px",
+    paddingXl: "32px",
+    paddingXxl: "48px",
+    margin: "16px",
+    marginSm: "12px",
+    marginXs: "8px",
+    marginXxs: "4px",
+    marginLg: "24px",
+    marginXl: "48px",
+    controlPaddingHorizontal: "12px",
+    controlPaddingHorizontalSm: "8px",
+    baseBaseNormal: "400 14px/22px 'SF Pro Text'",
+    baseBaseStrong: "600 14px/22px 'SF Pro Text'",
+    baseBaseUnderline: "400 14px/22px 'SF Pro Text'",
+    baseBaseDelete: "400 14px/22px 'SF Pro Text'",
+    baseBaseItalic: "Regular Italic 14px/22px 'SF Pro Text'",
+    smSmNormal: "400 12px/20px 'SF Pro Text'",
+    smSmStrong: "600 12px/20px 'SF Pro Text'",
+    smSmUnderline: "400 12px/20px 'SF Pro Text'",
+    smSmDelete: "400 12px/20px 'SF Pro Text'",
+    smSmItalic: "Regular Italic 12px/20px 'SF Pro Text'",
+    lgLgNormal: "400 16px/24px 'SF Pro Text'",
+    lgLgStrong: "600 16px/24px 'SF Pro Text'",
+    lgLgUnderline: "400 16px/24px 'SF Pro Text'",
+    lgLgDelete: "400 16px/24px 'SF Pro Text'",
+    lgLgItalic: "Regular Italic 16px/24px 'SF Pro Text'",
+    xlXlNormal: "400 20px/28px 'SF Pro Text'",
+    xlXlStrong: "600 20px/28px 'SF Pro Text'",
+    xlXlUnderline: "400 20px/28px 'SF Pro Text'",
+    xlXlDelete: "400 20px/28px 'SF Pro Text'",
+    xlXlItalic: "Regular Italic 20px/28px 'SF Pro Text'",
+    headingHeading1: "600 38px/46px 'SF Pro Text'",
+    headingHeading2: "600 30px/38px 'SF Pro Text'",
+    headingHeading3: "600 24px/32px 'SF Pro Text'",
+    headingHeading4: "600 20px/28px 'SF Pro Text'",
+    headingHeading5: "600 16px/24px 'SF Pro Text'",
+    fontWeightItalic: "Regular Italic",
+    paddingContentHorizontalLg: "24px",
+    paddingContentVerticalLg: "16px",
+    paddingContentHorizontal: "16px",
+    paddingContentVertical: "12px",
+    paddingContentHorizontalSm: "16px",
+    paddingContentVerticalSm: "8px",
+    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02)",
+    boxShadowSecondary: "0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)",
+    boxShadowCard: "0 1px 2px -2px rgba(0,0,0,0.16), 0 3px 6px 0 rgba(0,0,0,0.12), 0 5px 12px 4px rgba(0,0,0,0.09)",
+    colorItemText: "rgba(255, 255, 255, 0.65)",
+    colorItemTextDisabled: "rgba(255, 255, 255, 0.25)",
+    focusPrimary: "0 0 0 2px #e6f4ff",
+    focusError: "0 0 0 2px #fff1f0",
+    focusWarning: "0 0 0 2px #fffbe6",
+    tooltipBg: "rgba(0, 0, 0, 0.88)",
+    segmentedBgColorSelected: "#ffffff",
+    segmentedGroupBg: "rgba(0, 0, 0, 0.04)",
+    colorMenuDarkBg: "#001529",
+    colorMenuSubItemBg: "#000c17",
+    boxShadowButtonSolid: "0 2px 0 0 rgba(0, 0, 0, 0.02)",
+    paddingTooltipContentVertical: "6px"
+  }
+};
+
 function OdsButton(props) {
-  return React.createElement(React.Fragment, null, React.createElement(StyledButton, Object.assign({}, props), props.children));
+  return React.createElement(React.Fragment, null, React.createElement(ThemeProvider, {
+    theme: lightTheme
+  }, React.createElement(StyledButton, Object.assign({}, props), props.children)));
 }
 
 var onMenuClick = function onMenuClick(e) {
@@ -595,7 +929,6 @@ function grid(props) {
   };
   return React.createElement(React.Fragment, null, React.createElement(DataGrid, {
     dataSource: props.dataSource,
-    columnAutoWidth: props.columnAutoWidth,
     keyExpr: props.keyExpr,
     allowColumnResizing: props.allowColumnResizing !== undefined ? props.allowColumnResizing : false,
     columnResizingMode: "widget",
@@ -606,7 +939,7 @@ function grid(props) {
     allowColumnReordering: true,
     showRowLines: true,
     showBorders: true,
-    width: "100%",
+    columnAutoWidth: true,
     onEditCanceling: props.onEditCanceling
   }, React.createElement(Paging, {
     enabled: true,
@@ -685,13 +1018,13 @@ function grid(props) {
       return React.createElement(Column, {
         type: "buttons",
         width: 110
-      }, props.edit.allowUpdating && React.createElement(Button$1, {
+      }, React.createElement(Button$1, {
         hint: "Edit",
         visible: true,
         disabled: false,
         icon: "edit",
         onClick: props.editButtonClick
-      }), props.edit.allowDeleting && React.createElement(Button$1, {
+      }), React.createElement(Button$1, {
         hint: "Delete",
         visible: true,
         disabled: false,
@@ -702,9 +1035,9 @@ function grid(props) {
       return React.createElement(Column, {
         type: "buttons",
         width: 110
-      }, React.createElement(React.Fragment, null, props.edit.allowUpdating && React.createElement(Button$1, {
+      }, React.createElement(React.Fragment, null, React.createElement(Button$1, {
         name: "edit"
-      }), props.edit.allowDeleting && React.createElement(Button$1, {
+      }), React.createElement(Button$1, {
         name: "delete"
       })));
     }