@6thquake/react-material
Version:
React components that implement Google's Material Design.
397 lines (378 loc) • 14.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _colorManipulator = require("../styles/colorManipulator");
var treePrefixCls = 'rm-tree';
var treeDefaultOpenIcon = 'arrow_drop_down';
var treeShowlineOpenIcon = 'remove';
var treeShowlineCloseIcon = 'add'; // const treeDocIcon = "brightness_1";
var treeDocIcon = 'folder_open';
var borderColorBase = '#d9d9d9';
function checkboxFn(checkboxPrefixCls, theme) {
var _$concat, _$concat3, _ref;
var checkboxSize = 16;
var inputDisabledBg = '#f5f5f5';
var borderColorSplit = (0, _colorManipulator.fade)('#000', 0.91); // split border inside a component
var borderWidthBase = '1px'; // width of the border for a component
var borderStyleBase = 'solid';
var checkWidth = checkboxSize / 14 * 5;
var checkHeight = checkboxSize / 14 * 8;
var checkboxInnerPrefixCls = "".concat(checkboxPrefixCls, "-inner");
var indeterminateWidth = checkboxSize / 14 * 8;
var indeterminateHeight = checkboxSize / 14; // 一般状态
return _ref = {}, (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls), (_$concat = {
// .reset-component;
whiteSpace: 'nowrap',
cursor: 'pointer',
outline: 'none',
display: 'inline-block',
lineHeight: 1,
position: 'relative',
verticalAlign: 'middle',
top: '-0.09em'
}, (0, _defineProperty2.default)(_$concat, "& .".concat(checkboxPrefixCls, "-wrapper:hover &-inner,&:hover &-inner,&-input:focus + &-inner"), {
borderColor: theme.palette.primary.main
}), (0, _defineProperty2.default)(_$concat, '&-checked:after', {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: '2px',
border: "1px solid ".concat(theme.palette.primary.main),
content: '""',
animation: 'antCheckboxEffect 0.36s ease-in-out',
animationFillMode: 'both',
visibility: 'hidden'
}), (0, _defineProperty2.default)(_$concat, "&:hover:after,.".concat(checkboxPrefixCls, "-wrapper:hover &:after"), {
visibility: 'visible'
}), (0, _defineProperty2.default)(_$concat, '&-inner', {
position: 'relative',
top: 0,
left: 0,
display: 'block',
width: "".concat(checkboxSize, "px"),
height: "".concat(checkboxSize, "px"),
border: "".concat(borderWidthBase, " ").concat(borderStyleBase, " ").concat(borderColorBase),
borderRadius: '2px',
backgroundColor: '#fff',
transition: 'all .3s',
'&:after': {
transform: 'rotate(45deg) scale(0)',
position: 'absolute',
left: "".concat((checkboxSize - checkWidth) / 2 - 0.5 * (checkboxSize / 14), "px"),
top: "".concat((checkboxSize - checkHeight) / 2 - 2 * (checkboxSize / 14), "px"),
display: 'table',
width: "".concat(checkWidth, "px"),
height: "".concat(checkHeight, "px"),
border: '2px solid #fff',
borderTop: 0,
borderLeft: 0,
content: '" "',
transition: 'all .1s @ease-in-back'
}
}), (0, _defineProperty2.default)(_$concat, '&-input', {
position: 'absolute',
left: 0,
zIndex: 1,
cursor: 'pointer',
opacity: 0,
top: 0,
bottom: 0,
right: 0,
width: '100%',
height: '100%'
}), _$concat)), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-indeterminate .").concat(checkboxInnerPrefixCls, ":after"), {
content: '" "',
transform: 'scale(1)',
position: 'absolute',
left: (checkboxSize - 2 - indeterminateWidth) / 2,
top: (checkboxSize - 3 - indeterminateHeight) / 2,
width: indeterminateWidth,
height: indeterminateHeight
}), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-indeterminate.").concat(checkboxPrefixCls, "-disabled .").concat(checkboxInnerPrefixCls, ":after"), {
borderColor: (0, _colorManipulator.fade)('#000', 0.25)
}), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-checked .").concat(checkboxInnerPrefixCls, ":after "), {
transform: 'rotate(45deg) scale(1)',
position: 'absolute',
display: 'table',
border: '2px solid #fff',
borderTop: 0,
borderLeft: 0,
content: '" "',
transition: 'all .2s @ease-out-back .1s'
}), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-checked,.").concat(checkboxPrefixCls, "-indeterminate"), (0, _defineProperty2.default)({}, "& .".concat(checkboxInnerPrefixCls), {
backgroundColor: theme.palette.primary.main,
borderColor: theme.palette.primary.main
})), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-disabled"), (_$concat3 = {
cursor: 'not-allowed'
}, (0, _defineProperty2.default)(_$concat3, "&.".concat(checkboxPrefixCls, "-checked"), (0, _defineProperty2.default)({}, "& .".concat(checkboxInnerPrefixCls, ":after"), {
animationName: 'none',
borderColor: (0, _colorManipulator.fade)('#000', 0.25)
})), (0, _defineProperty2.default)(_$concat3, "& .".concat(checkboxPrefixCls, "-input"), {
cursor: 'not-allowed'
}), (0, _defineProperty2.default)(_$concat3, "& .".concat(checkboxInnerPrefixCls), {
borderColor: "".concat(borderColorBase, " !important"),
backgroundColor: inputDisabledBg,
'&:after': {
animationName: 'none',
borderColor: inputDisabledBg
}
}), (0, _defineProperty2.default)(_$concat3, '& + span', {
color: (0, _colorManipulator.fade)('#000', 0.25),
cursor: 'not-allowed'
}), _$concat3)), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-wrapper"), {
// .reset-component;
lineHeight: 'unset',
cursor: 'pointer',
display: 'inline-block',
'& + &': {
marginLeft: '8px'
}
}), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-wrapper + span,.").concat(checkboxPrefixCls, " + span"), {
paddingLeft: '8px',
paddingRight: '8px'
}), (0, _defineProperty2.default)(_ref, ".".concat(checkboxPrefixCls, "-group"), {
// .reset-component;
display: 'inline-block',
'&-item': {
display: 'inline-block',
marginRight: '8px',
'&:last-child': {
marginRight: 0
}
},
'&-item + &-item': {
marginLeft: 0
}
}), _ref;
}
function iconFont(content) {
return {
fontFamily: "'Material Icons'",
content: "\"".concat(content, "\"")
};
}
function treeSwitcherIcon() {
var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : treeDefaultOpenIcon;
return {
'&:after': (0, _extends3.default)({
fontSize: '20px',
transform: 'scale(1) rotate(0deg)',
// transform: `scale(${7/12}) rotate(0deg)`,
display: 'inline-block'
}, iconFont(type), {
fontWeight: 'bold',
transition: 'transform .3s'
})
};
}
function treeShowLineIcon(type) {
return {
'&:after': (0, _extends3.default)({
fontSize: '12px',
transform: 'scale(1) rotate(0deg)',
display: 'inline-block'
}, iconFont(type), {
verticalAlign: 'baseline',
fontWeight: 'normal',
transition: 'transform .3s'
})
};
}
var styles = function styles(theme) {
var _$concat5, _span, _li, _liTreenodeDisable, _$concat6;
var highlightColor = '#f5222d';
var textColor = (0, _colorManipulator.fade)('#000', 0.65);
var itemHoverBg = (0, _colorManipulator.fade)(theme.palette.primary.main, 0.1);
var disabledColor = (0, _colorManipulator.fade)('#000', 0.25);
var treeAhowlineIconColor = (0, _colorManipulator.fade)('#000', 0.45);
return {
'@global': (0, _extends3.default)({}, checkboxFn("".concat(treePrefixCls, "-checkbox"), theme), (0, _defineProperty2.default)({}, ".".concat(treePrefixCls), {
fontSize: '14px',
lineHeight: 1.5,
color: textColor,
boxSizing: 'border-box',
margin: 0,
padding: 0,
listStyle: 'none',
// '@keyframes loadingCircle': {
// '0%': {
// transformOrigin: '50% 50%',
// transform: 'rotate(0deg)'
// },
// '100%': {
// transformOrigin: '50% 50%',
// transform: 'rotate(360deg)'
// }
// },
'& ol, & ul': {
listStyle: 'none',
margin: 0,
padding: 0
},
'& li': (_li = {
padding: '4px 0',
margin: 0,
listStyle: 'none',
whiteSpace: 'nowrap',
outline: 0,
'& span[draggable],& span[draggable="true"]': {
userSelect: 'none',
borderTop: '2px transparent solid',
borderBottom: '2px transparent solid',
marginTop: '-2px',
/* Required to make elements draggable in old WebKit */
'-khtml-user-drag': 'element',
'-webkit-user-drag': 'element'
},
'&.drag-over': {
'& > span[draggable]': {
backgroundColor: theme.palette.primary.main,
color: 'white',
opacity: 0.8
}
},
'&.drag-over-gap-top': {
'& > span[draggable]': {
borderTopColor: theme.palette.primary.main
}
},
'&.drag-over-gap-bottom': {
'& > span[draggable]': {
borderBottomColor: theme.palette.primary.main
}
},
'&.filter-node': {
'& > span': {
color: "".concat(highlightColor, " !important"),
fontWeight: '500 !important'
}
},
'& ul': {
margin: 0,
padding: '0 0 0 18px'
}
}, (0, _defineProperty2.default)(_li, "& .".concat(treePrefixCls, "-node-content-wrapper"), (0, _defineProperty2.default)({
display: 'inline-block',
padding: '0 5px',
borderRadius: '2px',
margin: 0,
cursor: 'pointer',
textDecoration: 'none',
verticalAlign: 'top',
color: textColor,
transition: 'all .3s',
position: 'relative',
height: '24px',
lineHeight: '24px',
'&:hover': {
backgroundColor: itemHoverBg
}
}, "&.".concat(treePrefixCls, "-node-selected"), {
backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, 0.2)
})), (0, _defineProperty2.default)(_li, '& span', (_span = {}, (0, _defineProperty2.default)(_span, "&.".concat(treePrefixCls, "-checkbox"), {
margin: '4px 4px 0 2px'
}), (0, _defineProperty2.default)(_span, "&.".concat(treePrefixCls, "-switcher,&.").concat(treePrefixCls, "-iconEle"), {
margin: 0,
width: '24px',
height: '24px',
lineHeight: '24px',
display: 'inline-block',
verticalAlign: 'middle',
border: '0 none',
cursor: 'pointer',
outline: 'none',
textAlign: 'center',
'& .material-icons': {
verticalAlign: 'baseline',
fontSize: 'inherit',
lineHeight: 'inherit'
}
}), (0, _defineProperty2.default)(_span, "&.".concat(treePrefixCls, "-icon_loading"), {
position: 'absolute',
left: 0,
top: '1px',
background: '#fff',
transform: 'translateX(-100%)',
transition: 'all .3s',
'&:after': (0, _extends3.default)({
display: 'inline-block'
}, iconFont('E64D'), {
animation: 'loadingCircle 1s infinite linear',
color: theme.palette.primary.main
})
}), (0, _defineProperty2.default)(_span, "&.".concat(treePrefixCls, "-switcher"), (_$concat5 = {}, (0, _defineProperty2.default)(_$concat5, "&.".concat(treePrefixCls, "-switcher-noop "), {
cursor: 'default'
}), (0, _defineProperty2.default)(_$concat5, "&.".concat(treePrefixCls, "-switcher_open"), (0, _extends3.default)({}, treeSwitcherIcon())), (0, _defineProperty2.default)(_$concat5, "&.".concat(treePrefixCls, "-switcher_close"), function () {
var styles = treeSwitcherIcon();
styles['&:after'].transform = 'rotate(270deg) scale(1)';
return (0, _extends3.default)({}, styles);
}()), _$concat5)), _span)), (0, _defineProperty2.default)(_li, '&:last-child > span', (0, _defineProperty2.default)({}, "&.".concat(treePrefixCls, "-switcher,&.").concat(treePrefixCls, "-iconEle"), {
'&:before': {
display: 'none'
}
})), _li),
'&> li': {
'&:first-child': {
paddingTop: '7px'
},
'&:last-child': {
paddingBottom: '7px'
}
},
'&-child-tree': {
display: 'none',
'&-open': {
display: 'block'
}
},
'li&-treenode-disabled': (_liTreenodeDisable = {}, (0, _defineProperty2.default)(_liTreenodeDisable, "&> span:not(.".concat(treePrefixCls, "-switcher),\n > .").concat(treePrefixCls, "-node-content-wrapper,\n > .").concat(treePrefixCls, "-node-content-wrapper span"), {
color: disabledColor,
cursor: 'not-allowed'
}), (0, _defineProperty2.default)(_liTreenodeDisable, "&> .".concat(treePrefixCls, "-node-content-wrapper:hover"), {
background: 'transparent'
}), _liTreenodeDisable),
'&-icon__open': {
marginRight: '2px',
verticalAlign: 'top'
},
'&-icon__close': {
marginRight: '2px',
verticalAlign: 'top'
},
'&&-show-line': {
'& li': {
position: 'relative',
'& span': (0, _defineProperty2.default)({}, "&.".concat(treePrefixCls, "-switcher"), (_$concat6 = {
background: '#fff',
color: treeAhowlineIconColor,
'&:after': {
lineHeight: 1,
border: "1px solid ".concat(treeAhowlineIconColor),
borderRadius: '2px'
}
}, (0, _defineProperty2.default)(_$concat6, "&.".concat(treePrefixCls, "-switcher-noop"), (0, _extends3.default)({}, treeShowLineIcon(treeDocIcon))), (0, _defineProperty2.default)(_$concat6, "&.".concat(treePrefixCls, "-switcher-noop:after"), {
border: 'none'
}), (0, _defineProperty2.default)(_$concat6, "&.".concat(treePrefixCls, "-switcher_open"), (0, _extends3.default)({}, treeShowLineIcon(treeShowlineOpenIcon))), (0, _defineProperty2.default)(_$concat6, "&.".concat(treePrefixCls, "-switcher_close"), (0, _extends3.default)({}, treeShowLineIcon(treeShowlineCloseIcon))), _$concat6))
},
'& li:not(:last-child):before': {
content: '" "',
width: '1px',
borderLeft: "1px solid ".concat(borderColorBase),
height: '100%',
position: 'absolute',
left: '12px',
margin: '22px 0'
}
}
}))
};
};
var _default = styles;
exports.default = _default;