@yosgo/swap-ui 1.0.125 → 1.0.128
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { MyTooltipProps } from "../Tooltip/Tooltip.types";
|
|
3
|
+
declare type OmitTooltipProps = Omit<MyTooltipProps, "children">;
|
|
2
4
|
export interface ModalProps {
|
|
3
5
|
footer?: React.ReactNode;
|
|
4
6
|
multiline?: boolean;
|
|
@@ -32,6 +34,7 @@ export interface ModalProps {
|
|
|
32
34
|
style?: React.CSSProperties;
|
|
33
35
|
variant?: "primary" | "secondary" | "text" | "tertiary" | "black" | "danger";
|
|
34
36
|
loading?: boolean;
|
|
37
|
+
tooltip?: OmitTooltipProps;
|
|
35
38
|
};
|
|
36
39
|
primaryButton?: {
|
|
37
40
|
title?: string | React.ReactNode;
|
|
@@ -40,6 +43,7 @@ export interface ModalProps {
|
|
|
40
43
|
style?: React.CSSProperties;
|
|
41
44
|
variant?: "primary" | "secondary" | "text" | "tertiary" | "black" | "danger";
|
|
42
45
|
loading?: boolean;
|
|
46
|
+
tooltip?: OmitTooltipProps;
|
|
43
47
|
};
|
|
44
48
|
disUnderLine?: boolean;
|
|
45
49
|
disCloseIcon?: boolean;
|
|
@@ -47,3 +51,4 @@ export interface ModalProps {
|
|
|
47
51
|
checkIconColor?: "primary" | "secondary" | "tertiary" | "primary50" | "primary100" | "primary200" | "primary300" | "primary400" | "primary500" | "primary600" | "primary700" | "primary800" | "primary900" | "primaryA11y" | "secondary50" | "secondary100" | "secondary200" | "secondary300" | "secondary400" | "secondary500" | "secondary600" | "secondary700" | "secondary800" | "secondary900" | "secondaryA11y" | "danger50" | "danger100" | "danger200" | "danger300" | "danger400" | "danger500" | "danger600" | "danger700" | "danger800" | "danger900" | "dangerA11y" | "success50" | "success100" | "success200" | "success300" | "success400" | "success500" | "success600" | "success700" | "success800" | "success900" | "successA11y" | "white" | "black100" | "black200" | "black300" | "black400" | "black500" | "black600" | "black700" | "black800" | "black900" | "black1000";
|
|
48
52
|
iconColor?: "primary" | "secondary" | "tertiary" | "primary50" | "primary100" | "primary200" | "primary300" | "primary400" | "primary500" | "primary600" | "primary700" | "primary800" | "primary900" | "primaryA11y" | "secondary50" | "secondary100" | "secondary200" | "secondary300" | "secondary400" | "secondary500" | "secondary600" | "secondary700" | "secondary800" | "secondary900" | "secondaryA11y" | "danger50" | "danger100" | "danger200" | "danger300" | "danger400" | "danger500" | "danger600" | "danger700" | "danger800" | "danger900" | "dangerA11y" | "success50" | "success100" | "success200" | "success300" | "success400" | "success500" | "success600" | "success700" | "success800" | "success900" | "successA11y" | "white" | "black100" | "black200" | "black300" | "black400" | "black500" | "black600" | "black700" | "black800" | "black900" | "black1000";
|
|
49
53
|
}
|
|
54
|
+
export {};
|
package/build/index.esm.js
CHANGED
|
@@ -6662,6 +6662,58 @@ const host = createHost(primitives, {
|
|
|
6662
6662
|
});
|
|
6663
6663
|
const animated = host.animated;
|
|
6664
6664
|
|
|
6665
|
+
var useStyles$a = makeStyles$1(function (theme) { return ({
|
|
6666
|
+
root: function (props) { return ({
|
|
6667
|
+
margin: props.margin,
|
|
6668
|
+
backgroundColor: props.backgroundColor,
|
|
6669
|
+
color: props.color,
|
|
6670
|
+
padding: props.padding,
|
|
6671
|
+
boxShadow: theme.boxShadow.m,
|
|
6672
|
+
border: props.border,
|
|
6673
|
+
maxWidth: props.width,
|
|
6674
|
+
fontSize: 12,
|
|
6675
|
+
lineHeight: 1.4,
|
|
6676
|
+
fontWeight: props.fontWeight,
|
|
6677
|
+
}); },
|
|
6678
|
+
arrow: function (props) { return ({
|
|
6679
|
+
color: props.backgroundColor,
|
|
6680
|
+
}); },
|
|
6681
|
+
}); });
|
|
6682
|
+
var Tooltip = function (props) {
|
|
6683
|
+
var theme = useTheme$1();
|
|
6684
|
+
var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
|
|
6685
|
+
var styleProps = {
|
|
6686
|
+
width: width ? width : 240,
|
|
6687
|
+
padding: arrow ? "7.5px 12px" : 12,
|
|
6688
|
+
margin: margin
|
|
6689
|
+
? margin
|
|
6690
|
+
: marginTop
|
|
6691
|
+
? "0px 0px " + marginTop + "px 0px"
|
|
6692
|
+
: marginBottom
|
|
6693
|
+
? marginBottom + "px 0px 0px 0px"
|
|
6694
|
+
: marginRight
|
|
6695
|
+
? "0px 0px 0px " + marginRight + "px"
|
|
6696
|
+
: marginLeft
|
|
6697
|
+
? "0px " + marginLeft + "px 0px 0px"
|
|
6698
|
+
: "10px 0px",
|
|
6699
|
+
backgroundColor: dark
|
|
6700
|
+
? theme.black.black900
|
|
6701
|
+
: light
|
|
6702
|
+
? theme.black.white
|
|
6703
|
+
: theme.black.black900,
|
|
6704
|
+
color: dark
|
|
6705
|
+
? theme.black.white
|
|
6706
|
+
: light
|
|
6707
|
+
? theme.black.black800
|
|
6708
|
+
: theme.black.white,
|
|
6709
|
+
border: light ? "1px solid #CCCCCC" : null,
|
|
6710
|
+
fontWeight: arrow ? 700 : 400,
|
|
6711
|
+
};
|
|
6712
|
+
var classes = useStyles$a(styleProps);
|
|
6713
|
+
return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
|
|
6714
|
+
React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
|
|
6715
|
+
};
|
|
6716
|
+
|
|
6665
6717
|
var ModalTransitionEffect = React__default.forwardRef(function ModalTransitionEffect(props, ref) {
|
|
6666
6718
|
var open = props.in, slide = props.slide, children = props.children, onEnter = props.onEnter, onExited = props.onExited, style = props.style, other = __rest(props, ["in", "slide", "children", "onEnter", "onExited", "style"]);
|
|
6667
6719
|
var defaultStyle = useSpring({
|
|
@@ -7151,15 +7203,21 @@ var Modal = React__default.forwardRef(function (props, ref) {
|
|
|
7151
7203
|
secondaryButton || primaryButton ? (React__default.createElement(Box, { className: classes.footerButton },
|
|
7152
7204
|
React__default.createElement(Box, { width: mobile && !buttonFullWidth && !footerDisplayColumn
|
|
7153
7205
|
? null
|
|
7154
|
-
: "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (React__default.createElement(
|
|
7206
|
+
: "100%", marginRight: !footerDisplayColumn && secondaryButton ? 1 : 0 }, secondaryButton ? (secondaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, secondaryButton.tooltip),
|
|
7207
|
+
React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
|
|
7208
|
+
? secondaryButton.variant
|
|
7209
|
+
: "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn, variant: secondaryButton.variant
|
|
7155
7210
|
? secondaryButton.variant
|
|
7156
|
-
: "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title)) : null),
|
|
7157
|
-
React__default.createElement(Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (React__default.createElement(
|
|
7211
|
+
: "secondary", size: "small", onClick: secondaryButton.onClick, disabled: secondaryButton.disabled, loading: secondaryButton.loading, style: secondaryButton.style }, secondaryButton.title))) : null),
|
|
7212
|
+
React__default.createElement(Box, { width: "100%", marginBottom: footerDisplayColumn ? 1 : 0 }, primaryButton ? (primaryButton.tooltip ? (React__default.createElement(Tooltip, __assign({}, primaryButton.tooltip),
|
|
7213
|
+
React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
|
|
7214
|
+
? primaryButton.variant
|
|
7215
|
+
: "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : (React__default.createElement(Button, { fullWidth: buttonFullWidth || footerDisplayColumn || mobile, variant: primaryButton.variant
|
|
7158
7216
|
? primaryButton.variant
|
|
7159
|
-
: "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title)) : null))) : null)))))));
|
|
7217
|
+
: "primary", size: "small", onClick: primaryButton.onClick, disabled: primaryButton.disabled, loading: primaryButton.loading, style: primaryButton.style }, primaryButton.title))) : null))) : null)))))));
|
|
7160
7218
|
});
|
|
7161
7219
|
|
|
7162
|
-
var useStyles$
|
|
7220
|
+
var useStyles$b = makeStyles$1(function () { return ({
|
|
7163
7221
|
root: function (props) { return ({
|
|
7164
7222
|
backgroundColor: props.backgroundColor,
|
|
7165
7223
|
border: "1px solid " + props.borderColor,
|
|
@@ -7207,7 +7265,7 @@ var Banner = function (props) {
|
|
|
7207
7265
|
height: height ? height : null,
|
|
7208
7266
|
alignItems: mobile ? "flex-start" : alignStart ? "flex-start" : "center",
|
|
7209
7267
|
};
|
|
7210
|
-
var classes = useStyles$
|
|
7268
|
+
var classes = useStyles$b(styleProps);
|
|
7211
7269
|
var ref = useRef(null);
|
|
7212
7270
|
useEffect(function () {
|
|
7213
7271
|
if (ref.current) {
|
|
@@ -7233,7 +7291,7 @@ var Banner = function (props) {
|
|
|
7233
7291
|
React__default.createElement(Typography, { variant: "caption2" }, children)));
|
|
7234
7292
|
};
|
|
7235
7293
|
|
|
7236
|
-
var useStyles$
|
|
7294
|
+
var useStyles$c = makeStyles$1(function () { return ({
|
|
7237
7295
|
root: function (props) { return ({
|
|
7238
7296
|
backgroundColor: props.backgroundColor,
|
|
7239
7297
|
border: props.border,
|
|
@@ -7289,7 +7347,7 @@ var Chip = function (props) {
|
|
|
7289
7347
|
? theme.danger.danger800
|
|
7290
7348
|
: theme.primary.primary800,
|
|
7291
7349
|
};
|
|
7292
|
-
var classes = useStyles$
|
|
7350
|
+
var classes = useStyles$c(styleProps);
|
|
7293
7351
|
return (React__default.createElement("div", __assign({ className: classes.root }, other),
|
|
7294
7352
|
React__default.createElement("span", { style: { marginRight: variant === "success" ? 4 : 0 } }, label),
|
|
7295
7353
|
variant === "success" && !icon ? icon_success : icon));
|
|
@@ -7320,58 +7378,6 @@ var CircularProgress = function (props) {
|
|
|
7320
7378
|
} })));
|
|
7321
7379
|
};
|
|
7322
7380
|
|
|
7323
|
-
var useStyles$c = makeStyles$1(function (theme) { return ({
|
|
7324
|
-
root: function (props) { return ({
|
|
7325
|
-
margin: props.margin,
|
|
7326
|
-
backgroundColor: props.backgroundColor,
|
|
7327
|
-
color: props.color,
|
|
7328
|
-
padding: props.padding,
|
|
7329
|
-
boxShadow: theme.boxShadow.m,
|
|
7330
|
-
border: props.border,
|
|
7331
|
-
maxWidth: props.width,
|
|
7332
|
-
fontSize: 12,
|
|
7333
|
-
lineHeight: 1.4,
|
|
7334
|
-
fontWeight: props.fontWeight,
|
|
7335
|
-
}); },
|
|
7336
|
-
arrow: function (props) { return ({
|
|
7337
|
-
color: props.backgroundColor,
|
|
7338
|
-
}); },
|
|
7339
|
-
}); });
|
|
7340
|
-
var Tooltip = function (props) {
|
|
7341
|
-
var theme = useTheme$1();
|
|
7342
|
-
var arrow = props.arrow, margin = props.margin, marginTop = props.marginTop, marginBottom = props.marginBottom, marginRight = props.marginRight, marginLeft = props.marginLeft, dark = props.dark, light = props.light, children = props.children, width = props.width, childrenStyle = props.childrenStyle, other = __rest(props, ["arrow", "margin", "marginTop", "marginBottom", "marginRight", "marginLeft", "dark", "light", "children", "width", "childrenStyle"]);
|
|
7343
|
-
var styleProps = {
|
|
7344
|
-
width: width ? width : 240,
|
|
7345
|
-
padding: arrow ? "7.5px 12px" : 12,
|
|
7346
|
-
margin: margin
|
|
7347
|
-
? margin
|
|
7348
|
-
: marginTop
|
|
7349
|
-
? "0px 0px " + marginTop + "px 0px"
|
|
7350
|
-
: marginBottom
|
|
7351
|
-
? marginBottom + "px 0px 0px 0px"
|
|
7352
|
-
: marginRight
|
|
7353
|
-
? "0px 0px 0px " + marginRight + "px"
|
|
7354
|
-
: marginLeft
|
|
7355
|
-
? "0px " + marginLeft + "px 0px 0px"
|
|
7356
|
-
: "10px 0px",
|
|
7357
|
-
backgroundColor: dark
|
|
7358
|
-
? theme.black.black900
|
|
7359
|
-
: light
|
|
7360
|
-
? theme.black.white
|
|
7361
|
-
: theme.black.black900,
|
|
7362
|
-
color: dark
|
|
7363
|
-
? theme.black.white
|
|
7364
|
-
: light
|
|
7365
|
-
? theme.black.black800
|
|
7366
|
-
: theme.black.white,
|
|
7367
|
-
border: light ? "1px solid #CCCCCC" : null,
|
|
7368
|
-
fontWeight: arrow ? 700 : 400,
|
|
7369
|
-
};
|
|
7370
|
-
var classes = useStyles$c(styleProps);
|
|
7371
|
-
return (React__default.createElement(MaterialTooltip, __assign({ classes: { tooltip: classes.root, arrow: classes.arrow } }, other, { arrow: arrow }),
|
|
7372
|
-
React__default.createElement("div", { style: __assign({ width: "fit-content", height: "fit-content", display: "flex", alignItems: "center", justifyContent: "center" }, childrenStyle) }, children)));
|
|
7373
|
-
};
|
|
7374
|
-
|
|
7375
7381
|
function _extends() {
|
|
7376
7382
|
_extends = Object.assign || function (target) {
|
|
7377
7383
|
for (var i = 1; i < arguments.length; i++) {
|
|
@@ -11760,7 +11766,7 @@ var useStyles$f = makeStyles$1(function (theme) { return ({
|
|
|
11760
11766
|
var AutoComplete = function (props) {
|
|
11761
11767
|
var _a = useState([]), noOptionValue = _a[0], setNoOptionValue = _a[1];
|
|
11762
11768
|
var _b = useState(false), typeNoOptionValue = _b[0], setTypeNoOptionValue = _b[1];
|
|
11763
|
-
var open = props.open, helperText = props.helperText, value = props.value, handleNoOptionsValueChange = props.handleNoOptionsValueChange, options = props.options, placeholder = props.placeholder, placement = props.placement, title = props.title, width = props.width, anchorEl = props.anchorEl, disableFreeInput = props.disableFreeInput, renderOption = props.renderOption, getOptionLabel = props.getOptionLabel, noOptionsText = props.noOptionsText, renderInput = props.renderInput, optionsMaxHeight = props.optionsMaxHeight, anchorOrigin = props.anchorOrigin, other = __rest(props, ["open", "helperText", "value", "handleNoOptionsValueChange", "options", "placeholder", "placement", "title", "width", "anchorEl", "disableFreeInput", "renderOption", "getOptionLabel", "noOptionsText", "renderInput", "optionsMaxHeight", "anchorOrigin"]);
|
|
11769
|
+
var open = props.open, helperText = props.helperText, value = props.value, handleNoOptionsValueChange = props.handleNoOptionsValueChange, options = props.options, placeholder = props.placeholder, placement = props.placement, title = props.title, width = props.width, anchorEl = props.anchorEl, disableFreeInput = props.disableFreeInput, renderOption = props.renderOption, getOptionLabel = props.getOptionLabel, noOptionsText = props.noOptionsText, renderInput = props.renderInput, optionsMaxHeight = props.optionsMaxHeight, anchorOrigin = props.anchorOrigin, addNewOptionsText = props.addNewOptionsText, other = __rest(props, ["open", "helperText", "value", "handleNoOptionsValueChange", "options", "placeholder", "placement", "title", "width", "anchorEl", "disableFreeInput", "renderOption", "getOptionLabel", "noOptionsText", "renderInput", "optionsMaxHeight", "anchorOrigin", "addNewOptionsText"]);
|
|
11764
11770
|
var styleProps = {
|
|
11765
11771
|
width: width,
|
|
11766
11772
|
optionsMaxHeight: optionsMaxHeight,
|
|
@@ -11778,12 +11784,13 @@ var AutoComplete = function (props) {
|
|
|
11778
11784
|
option: classes.option,
|
|
11779
11785
|
popperDisablePortal: classes.popperDisablePortal,
|
|
11780
11786
|
listbox: classes.listbox,
|
|
11781
|
-
}, open: true, options: options, renderOption: renderOption, getOptionLabel: getOptionLabel, noOptionsText: disableFreeInput ? ("無此選項") :
|
|
11782
|
-
"
|
|
11787
|
+
}, open: true, options: options, renderOption: renderOption, getOptionLabel: getOptionLabel, noOptionsText: disableFreeInput ? ("無此選項") : (React__default.createElement("div", { className: classes.noOptionValue },
|
|
11788
|
+
noOptionsText ? noOptionsText : "無此選項",
|
|
11783
11789
|
React__default.createElement("div", { className: classes.linkText, onMouseDown: function () {
|
|
11784
11790
|
handleNoOptionsValueChange(noOptionValue.value);
|
|
11785
11791
|
} },
|
|
11786
|
-
|
|
11792
|
+
addNewOptionsText ? addNewOptionsText : "使用",
|
|
11793
|
+
" \u300C",
|
|
11787
11794
|
noOptionValue.value,
|
|
11788
11795
|
"\u300D"))), renderInput: renderInput
|
|
11789
11796
|
? renderInput
|
|
@@ -12740,10 +12747,15 @@ var DatePicker = function (props) {
|
|
|
12740
12747
|
var open = props.open, onClose = props.onClose, format = props.format, mobile = props.mobile, min = props.min, max = props.max, ModalProps = props.ModalProps, defaultValue = props.defaultValue, getValue = props.getValue, value = props.value, other = __rest(props, ["open", "onClose", "format", "mobile", "min", "max", "ModalProps", "defaultValue", "getValue", "value"]);
|
|
12741
12748
|
var _a = useState(Number(new Date().getFullYear())), year = _a[0], setYear = _a[1];
|
|
12742
12749
|
var _b = useState(Number(new Date().getMonth() + 1)), month = _b[0], setMonth = _b[1];
|
|
12743
|
-
var _c = useState(
|
|
12750
|
+
var _c = useState(Number(new Date().getMonth() + 2)), nextMonth = _c[0], setNextMonth = _c[1];
|
|
12744
12751
|
var _d = useState(""), date = _d[0], setDate = _d[1];
|
|
12745
12752
|
var _e = useState(false), isOpenMonthSelector = _e[0], setIsOpenMonthSelector = _e[1];
|
|
12746
12753
|
var _f = useState(false), isClicked = _f[0], setIsClicked = _f[1];
|
|
12754
|
+
useEffect(function () {
|
|
12755
|
+
if (month === 12) {
|
|
12756
|
+
setNextMonth(1);
|
|
12757
|
+
}
|
|
12758
|
+
}, []);
|
|
12747
12759
|
useEffect(function () {
|
|
12748
12760
|
if (format === "month") {
|
|
12749
12761
|
if (month % 2 === 0) {
|